vue-cropper图片裁剪网络图片展示时跨域

在使用vue-cropper时，展示图片的时候出现跨域

报错如下：

vue-cropper空白

解决方法：
将网络图片转为base64

// 将网络图片转换成base64格式transBase64FromImage(image) {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, image.width, image.height)// 可选其他值 image/jpegreturn canvas.toDataURL('image/jpeg')},// 设置需要展示的图片  base64setAvatarBase64(src, callback) {let _this = thislet image = new Image()// 处理缓存image.src = src + '?v=' + Math.random()// 支持跨域图片image.crossOrigin = '*'image.onload = function() {let base64 = _this.transBase64FromImage(image)callback && callback(base64)}},

初始化时调用setAvatarBase64方法

 this.option.img = ''this.setAvatarBase64(this.listQuery.avatarImage, base64 => {this.$nextTick(() => {this.option.img = base64})})

以上代码就解决了，希望看到这篇文章对你有帮助

vue-cropper图片裁剪网络图片展示时跨域相关推荐

史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
Vue项目中你是如何解决跨域的呢？
Vue项目中你是如何解决跨域的呢? 一.跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源( ...
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域 <!DOCTYPE html> <html><head><meta chars ...
chrome插件开发时跨域问题解决方案
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言-博主看到后会去代替大家踩坑的-接下来的几篇都是uni-app的小实战,有助于我们更好的去学 ...
vue实现图片裁剪后上传
一.背景目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先 ...
【前端知识】Cropper图片裁剪插件中文文档
Cropper 插件教程 cropper官网 cropperjs下载地址 cropper视频教程插件导入 <link rel="stylesheet" href=" ...
基于vue的图片裁剪框的实现
1.基于vue建设一个裁剪框全文附录我会放到最后,有需要的小伙伴自取 ## 1.1在没有添加图片的时候显示如上图的css样式 <label class="h-photo-left&q ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
html2canvas微信头像跨域,企业微信头像前端使用canvas处理时跨域
拿到的企业微信头像是正方形我需要使用canvas处理成圆形但处理时发现会有跨域问题正常微信的图片就没有问题只有企业微信的域名头像会提示跨域 const canvas = document.cr ...

vue-cropper图片裁剪网络图片展示时跨域

在使用vue-cropper时，展示图片的时候出现跨域

vue-cropper图片裁剪网络图片展示时跨域相关推荐

最新文章

热门文章