vue Base64解决图片跨域问题 

 1 imageUrlToBase64(img) { //头像转Base64解决跨域问题
 2      var image = new Image();
 3      image.setAttribute('crossOrigin', 'anonymous');
 4           var imageUrl = img;
 5           image.src = imageUrl;
 6      　　　image.onload = function(){
 7                this.getImage(image);
 8  　　　　　}
 9 },
10 getImage(image) {
11    var canvas = document.createElement('canvas');
12    canvas.width = image.width;
13    canvas.height = image.height;
14    var context = canvas.getContext('2d');
15    context.drawImage(image, 0, 0, image.width, image.height);
16    var quality = 0.8;
17    var dataURL = canvas.toDataURL('image/jpeg', quality);
18    return dataURL;
19},

通常在使用生成海报需要转成canvas时，需要将图片放到本地才可以使用，但是某些图是在cdn上或者是微信头像，这类图片生成canvas时会出现跨域的问题，需要将图片转成base64位的就可以转啦

posted @ 2022-02-23 16:40  烂笔头~  Views(665)  Comments(0)  Edit  收藏  举报