вопрос 5 лет, но он все еще для меня "горячий", я хочу поделиться той же проблемой, с которой я только что столкнулся.
Подход "Take One", возможно, является самым первым подходом, который каждый программист использовал для изменения источника изображения, но до сих пор (через 5 лет после публикации этого вопроса) проблема все еще возникала, часто меняйте <img> 'src' и вы можете увидеть в диспетчере задач Windows, что ваш браузер стал жадным.
«Взять два» создают мерцание, и это редко приемлемо.
К счастью, html5 поставляется с <canvas>, поэтому я пытаюсь использовать <canvas> для решения этой проблемы.
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
img.src = "";
}
img.src = "data:image/png;base64," + stringSource;
Обнаружена новая проблема, <canvas> отличная от <img>, она не будет автоматически изменять размеры и «соответствовать». Мы должны вручную изменить размер изображения, чтобы он соответствовал холсту и сохранял соотношение. Ниже приведен мой код для решения проблемы
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function () {
var imageWidth = canvas.width;
var imageHeight = canvas.height;
var xPosition = 0;
var yPosition = 0;
var proportion = 1;
var padding = 2;
if ((img.width / canvas.width) > (img.height / canvas.height)) {
proportion = img.width / canvas.width;
}
else {
proportion = img.height / canvas.height;
}
imageWidth = img.width / proportion;
imageHeight = img.height / proportion;
xPosition = (canvas.width - imageWidth) / 2;
yPosition = (canvas.height - imageHeight) / 2;
ctx.drawImage(img, 0, 0, img.width, img.height, xPosition+padding, yPosition+padding, imageWidth-2*padding, imageHeight-2*padding);
img.src = "";
}
img.src = "data:image/png;base64," + stringSource;
Надеюсь, это поможет любому, кто столкнется с той же проблемой.