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

最新推荐文章于 2026-03-17 01:46:42 发布

原创

最新推荐文章于 2026-03-17 01:46:42 发布 · 4.2k 阅读

标签

#vue.js #前端

收录于

本文介绍了在使用vue-cropper组件时遇到的网络图片跨域问题，展示了报错情况，并提出了解决方案——将网络图片转换为Base64编码，通过初始化时调用setAvatarBase64方法来避免跨域问题。

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

报错如下：
请添加图片描述
vue-cropper空白

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

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