画布调整大小,其中包含图像

时间:2016-12-15 14:45:37

标签: javascript html5 canvas

我正在尝试在单击提交按钮后将图像从mm调整为像素,但我只能裁剪原始图像。改变尺寸后,看起来画布不是令人耳目一新的图像。我该怎么做呢?

jsfiddle

上的示例

JS代码:

document.addEventListener("DOMContentLoaded", function() {
    var width = 0;
    var height = 0;
    var colors = 0;
    var order = 0;

var canvas = document.getElementById('project');
var context = canvas.getContext('2d');
var logo = document.getElementById('logo');

logo.onload = function() {
    canvas.width = logo.width;
    canvas.height = logo.height;

    context.drawImage(logo, 0, 0);
};

document.getElementById("btn_sub").addEventListener("click", function(event) {
    event.preventDefault();

    width = document.getElementById("form1").elements[0].value;
    height = document.getElementById("form1").elements[1].value;
    colors = document.getElementById("form1").elements[2].value;
    order = document.getElementById("form1").elements[3].value;

    logo.width = (width * 118) / 25.4;
    logo.height = (height * 118) / 25.4;

    canvas.width = (width * 118) / 25.4;
    canvas.height = (height * 118) / 25.4;

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(logo, 0, 0);

1 个答案:

答案 0 :(得分:0)

drawImage函数没有考虑图像元素的宽度和高度。要使这项工作,你可以使用drawImage函数context.drawImage(img,x,y,width,height)的这个重载。

例如,context.drawImage(logo, 0, 0, logo.width, logo.height)