项目中有一个需求：实现画板的功能。提供一张图片。可以在上面写字，并且可以放大缩小。
1.图片转换为canvas
在render中先插入一张图片和一个canvas，给img添加src。等到src加载完成后。获取这个图片并绘制canvas（这边也可以使用new Image()方法）
代码：
canvas.width = img.width;
canvas.height = img.height;
this.ctx = canvas.getContext("2d");
this.ctx.drawImage(img,0,0,img.width,img.height);
$(img).remove();
这样就把图片放到canvas中去
2.在这个canvas上写字
主要用到 lineTo方法技巧
var me = this;
this.ctx.lineWidth = 1;//笔触的粗细
this.ctx.strokeStyle = 'red'//笔的颜色
canvas.onmousedown = function(event){
me.ctx.beginPath();
me.moveTo(event.offsetX,event.offsetY);//从这里开始画
}
canvas.onmouseup = function(event){
me.cxt.closePath();//结束
}
canvas.onmousemove = function(event){
me.cxt.lineTo(event.offsetX,event.offsetY);//移动到
me.cxt.stroke();//实现划线连接
}
3.保存canvas到本地图片
思路：把canvas转换成base64，然后使用node的filesystem的writeFile方法把buffer写入本地
var imgData = canvas.toDataURL("img/png");
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data,'base64');
fs.writeFile("C:/.../XXX.png",dataBuffer,function(err){})
4.缩放canvas大小是因为在这里遇到了问题。
我期望的效果是canvas缩小状态和放大状态都是一个东西。所有东西成比例呈现。但是在开发过程中发现。直接修改canvas的width和height属性，canvas的宽高变化了，但是里面的图却没有了。
网上查了一下，需要重新画一次。思路是先getImgData,然后再pushImgData。我照着做了一次。
var imgData = me.ctx.getImageData(0,0,canvas.width,canvas.height);
canvas.width = newWidth;
canvas.height = newHeight;
me.ctx.putImageData(imgData.0.0)
然后我发现，这边是可以画出原来的图的。但是呢！新画的图还是原来的大小，而不是新的宽高的图。这个肯定不是我想要的。而且putImageData方法参数也没有提供可以设置imgData宽高的方法。我试着手动修改imgData的width和height属性，也报错说是只读的。
接着就把canvas转换成图片，把新生成的图片再画一次
var image = new Image();
image.src = canvas.toDataURL("image/png");
me.ctx.drawImage(image,0,0,oldWidth,oldHeight,0,0,newWidth,newHeight);
这个问题就得到解决了。
知其然不知其所以然
网友评论