当图片缩小到0.5时,水印不在图片 上,那么下载的图片就没有水印了

来源:3-1 离屏Canvas 为图片添加水印

xl87

2015-10-27 15:06

当图片缩小到0.5时,水印不在图片 上,那么下载的图片就没有水印了

写回答 关注

1回答

  • Q版的我
    2015-12-18 14:03:05

    在变动时添加一些判断就好了

    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);
                }


    侠客岛的含笑

    加在哪里???

    2016-05-22 00:21:17

    共 1 条回复 >

Canvas玩转图像处理

canvas系列第三课,学会编写图像算法,一起玩转图像处理吧

60311 学习 · 124 问题

查看课程

相似问题