xl87
2015-10-27 15:06
当图片缩小到0.5时,水印不在图片 上,那么下载的图片就没有水印了
在变动时添加一些判断就好了
range.addEventListener('change',function(){//range = document.getElementById("range")获取滑杆 var sx = canvas.width*(1-range.value)/2;//图片左上角x坐标 var sy = canvas.height*(1-range.value)/2;//图片左上角Y坐标 context.clearRect(0,0,canvas.width,canvas.height);//清除context的图像 context.drawImage(image,sx,sy,canvas.width*range.value,canvas.height*range.value);//重绘图片 if(range.value<1){ //判断放大比例是否少于1 context.drawImage(offsetCanvas, sx+canvas.width*range.value-offsetCanvas.width,//水印的左上角x值 //sx是图片的左上角位置,加上图片右下角的x值就是整个canvas的左边界 //到图片的右下角x的总距离,再减去水印自身的x值,就是水印左上角x值 sy+canvas.height*range.value-offsetCanvas.height);//水印的左上角Y值 }else{ context.drawImage(offsetCanvas, canvas.width-offsetCanvas.width, canvas.height-offsetCanvas.height); }
Canvas玩转图像处理
60329 学习 · 124 问题
相似问题