Как определить размер изображения «Сохранить как»?

Question

У меня есть страница, которая строит QR-код в элементе Canvas на 256X256. Назначает источник соответствующего «пустого» тега изображения его содержимому с вызовом canvas toDataURL().

Клиент хочет, чтобы изображение было 156X156px, когда они сохраняют его на своей машине. Однако, когда вы щелкаете правой кнопкой мыши, чтобы сохранить, поскольку это сохраняет его, используя естественное разрешение (256X256) изображения, а не тот, который определяется тегом Image.

Как уменьшить масштаб или заставить браузер сохранять его в определенных размерах с помощью JavaScript?

Установка ширины или высоты холста непосредственно перед тем, как я сделаю это URL, похоже, сломал холст, и изображение получилось просто белым.

Answer 1

Это звучит так, как если бы вы использовали библиотеку для создания QR-кода, который в случае, возможно, мог бы использовать опции для определения размера результата.

Если нет, вы всегда можете сделать промежуточный шаг по мере изменения размера холста впоследствии очистит его, как вы обнаружили.

Создать новый холст размер вам нужно:

var canvas = document.createElement("canvas"), 
    ctx = canvas.getContext("2d"); 

Установить конечный размер:

canvas.width = canvas.height = 156; 

Изобразите QR изображение в нем:

ctx.drawImage(qrImage, 0, 0, 156, 156); 

, а затем заменить изображение в DOM (если он был введен) с этим холстом.Дополнительный этап может потребоваться, если браузер действительно много позволяют правой кнопкой мыши сохранить холста:

var newQR = new Image(); 
newQR.src = canvas.toDataURL(); 
// insert into DOM (replacing the old if necessary) 

Вы можете обернуть его в функцию, как это: (только предполагающие квадратных размеров)

function reduceImage(oldImage, newSize) { 
 

 
    var parent = oldImage.parentNode, 
 
     canvas = document.createElement("canvas"), 
 
     ctx = canvas.getContext("2d"), 
 
     newImage = new Image(); 
 

 
    canvas.width = canvas.height = newSize; 
 
    ctx.drawImage(oldImage, 0, 0, newSize, newSize); 
 

 
    parent.removeChild(oldImage); 
 

 
    newImage.src = canvas.toDataURL(); 
 
    parent.appendChild(newImage); 
 
} 
 

 
// -- just for demo below -- 
 
window.onload = function() { 
 
    var oldImg = document.getElementById("oldImage"), 
 
     btnRepl = document.getElementById("btnRepl"); 
 
    btnRepl.onclick = function() {reduceImage(oldImg, 156)} 
 
};

div {border: 2px solid #999}

<button id="btnRepl">Click to reduce size</button><br> 
 
<div><img id="oldImage" src="http://i.imgur.com/duh6Lco.jpg" crossOrigin=""></div>

Answer 2

Вы можете использовать context.scale, чтобы перетащить все новое содержимое на холсте.

Таким образом, предполагается, что ваш оригинальный холст 256x256, вы можете сделать версию 156x156 вашего QR так:

// resize the canvas to 156x156 
canvas.width=156; 
canvas.height=156; 

// scale all future drawings to 156x156 instead of 256x256 
var scale=156/256; 
context.scale(scale,scale); 

// now redraw the QR just as before 
// No changes in size/coordinates needed 

// After drawing the QR, just export as usual 
// (it will now be 156x156) 
var dataURL=canvas.toDataURL(); 

О вашей «белое пространство»: Изменение размера холста автоматически удаляет все содержимое на холст.

Answer 3

Вот скрипт, который заворачивает context и canvas.toDataUrl() упоминаемый MARKE:

http://webreflection.blogspot.ch/2010/12/100-client-side-image-resizing.html

На этом сайте также мало демо. После того, как вы сохраните измененный размер изображения, вы увидите, что он практически такой же маленький, как вы видели его на экране, независимо от того, насколько он был до загрузки.

Если вы ищете такие термины, как «изменение размера изображения на стороне клиента javascript», вы найдете больше библиотек.