Vue項目中給圖片加水印并下載(已處理跨域問題)

1.封裝方法

 DownLoadImages(imgUrl,text){
       var image = new Image;
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous');
            // image.crossOrigin = "anonymous";
            image.onload = function () {
                var canvas = document.createElement('canvas');//創建canvas
                canvas.width = image.width;
                canvas.height = image.height
                var context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height);
                context.font = "12px HelveticaNeue-Medium";//定義水印字體
                context.fillStyle = "rgba(242, 246, 249,0.95)";//定義水印顏色
                context.shadowColor = 'rgba(0, 0, 0, 0.8)';// 设置文字阴影的颜色为黑色，透明度为20%
                context.shadowOffsetX = 2;// 設置阴影
                context.shadowOffsetY = 2;// 設置阴影
                context.shadowBlur = 5;// 設置模糊阴影
                context.fillText(text, 10, image.height-10);//定義水印位置
                var url = canvas.toDataURL('image/jpg')
                // 生成一个a元素
                var a = document.createElement('a');
                // 创建一个单击事件
                var event = new MouseEvent('click');
                a.download = '圖片.png' // 設置默认的名称
                // 将生成的URL设置为a.href属性
                a.href = url
                // 触发a的单击事件
                a.dispatchEvent(event);

            };
            image.src = imgUrl;
    }

2.調用方法

DownLoadImages("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg","這個是水印")