使用纯JavaScript调整HTML 5画布及其内容的大小 [英] Resize a HTML 5 canvas and its content in pure Javascript

问题描述

我想在我的Web应用程序中实现一个缩放功能，以按比例调整画布及其内容的大小（我不在乎脏的质量）。

这是我的代码。每次我们想要放大以重新获得一个Image对象（使用drawImage方法），重新调整画布大小，然后使用drawImage方法来按比例调整内容...

  var Editor = {
 //以下变量包含信息
 //关于原始画布
 data：...， / imageData 
 width：200，
 height：50，
 
 //缩放画布
 zoomCanvas：function（zoom）{//放大百分比
 var canvas = $（'＃canvas'）。get（0）; 
 var context = canvas.getContext（）; 
 var data = this.data; 
 var scale = zoom / 100; 
 var width = this.width * scale; 
 var height = this.height * scale; 
 
 //将画布重置为原始大小和imageData 
 this.resizeCanvas（this.width，this.height）; 
 context.scale（1，1）; 
 context.putImageData（data，0，0）; 
 
 //从原始画布数据获取图像
 var url = canvas.toDataURL（）; 
 var img = $（'< img src ='+ url +'>'）。get（0）; 
 
 //调整画布大小，应用比例和绘制带有新比例的图像
 this.resizeCanvas（width，height）; 
 context.scale（scale，scale）; 
 context.drawImage（img，0，0）; 
}，
 
 //调整画布大小
 resizeCanvas：function（width，height）{
 //注意：我不知道如何调整大小... 
 var canvas = $（'＃canvas'）。get（0）; 
 canvas.width = width; 
 canvas.height = height; 
 $（canvas）.width（width）.attr（'width'，width）; 
 $（canvas）.height（height）.attr（'height'，height）; 
 
 var context = canvas.getContext（'2d'）; 
 context.width = width; 
 context.height = height; 
} 
} 
  

它适用于Zoom +，但不适用于Zoom。

无论如何，我认为这不是我期望的最好的方法，最好找到一种直接从Editor.data操作的方法，每次重置画布，或保存Image对象。
此外，我不确定使用缩放方法...

任何帮助将不胜感激

（抱歉我的英文）

解决方案

尝试使用 < input type =range> transform：scale（sx [，sy]）

 pre> 
  body {height：800px;} canvas {background：blue; position：relative; display：block;}＃scale {position：relative; display：inline-block; padding：8px;}  
 
 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< input id =scaletype =rangemin =0 max =2step =0.1value =/>< br />< br />< br />< br / /> 
 / div> 

I would like to implement a "zoom" function in my Web App to resize a canvas and its content proportionally (I don't care about dirty quality).

Here's my code. It resets the canvas each time we want to zoom in order to get an Image object (for using drawImage method), resize the canvas, and then use drawImage method to resize content proportionally...

var Editor = {
    // The following variables contains informations
    // about the original canvas
    data: ..., // imageData
    width: 200,
    height: 50,

    // Zoom canvas
    zoomCanvas: function(zoom){ // zoom in percents
        var canvas = $('#canvas').get(0);
        var context = canvas.getContext();
        var data = this.data;
        var scale = zoom / 100;
        var width = this.width * scale;
        var height = this.height * scale;

        // Reset canvas to original size and imageData
        this.resizeCanvas(this.width, this.height); 
        context.scale(1, 1);
        context.putImageData(data, 0, 0);

        // Get Image from original canvas data
        var url = canvas.toDataURL();
        var img = $('<img src="' + url + '">').get(0);

        // Resize canvas, apply scale and draw Image with new proportions
        this.resizeCanvas(width, height);
        context.scale(scale, scale);
        context.drawImage(img, 0, 0);
    },

    // Resize canvas
    resizeCanvas: function(width, height){
        // NOTE : I don't know exactly how to resize it so...
        var canvas = $('#canvas').get(0);
        canvas.width = width;
        canvas.height = height;
        $(canvas).width(width).attr('width', width);
        $(canvas).height(height).attr('height', height);

        var context = canvas.getContext('2d');
        context.width = width;
        context.height = height;
    }
}

It works for Zoom + but not for Zoom -.

Anyway, I don't think it's the best way to do what I expect, it would be better to find a way to operate directly from Editor.data, without having to reset the canvas each time, or saving the Image object. In addition, I'm not sure about using scale method...

Any help would be appreciated

(Sorry about my english)

解决方案

Try utilizing <input type="range"> , transform: scale(sx[, sy])

var canvas = document.querySelectorAll("canvas")[0]
, scale = document.getElementById("scale");

scale.addEventListener("change", function(e) {
  canvas.style.transform = "scale(" 
  + e.target.value 
  + ","      
  + e.target.value 
  + ")"
})

body {
  height:800px;
}

canvas {
  background:blue;
  position:relative;
  display:block;
}

#scale {
  position:relative;
  display:inline-block;
  padding:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="scale" type="range" min="0" max="2" step="0.1" value=""/><br /><br /><br /><br /><br /><br /><br />
<canvas width="200" height="200"></canvas><br />

这篇关于使用纯JavaScript调整HTML 5画布及其内容的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！