js将图片url转化为base64

二七二十七

已于 2022-12-20 21:03:21 修改

阅读量2.6k

点赞数 1

分类专栏：开发经验总结文章标签： javascript 前端 html

于 2022-12-19 20:29:52 首次发布

本文链接：https://blog.csdn.net/lhh_gxx/article/details/128377299

版权

开发经验总结专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本文介绍了一个JavaScript函数，用于将网络图片URL转换为canvas对象，并处理了跨域限制。首先设置图片跨域属性，然后加载图片，将其绘制到canvas上，最后转换为base64字符串。在前端实现此功能时，需确保服务器允许跨域。如果遇到'相片处理失败'的错误，可能是因为图片未开启跨域。

摘要由CSDN通过智能技术生成

将以下代码复制封装于xxx.js文件中，放置在项目文件夹utiles下

/**
 * 把url转换为 canvas对象
 * @param url 网络图片地址必须服务器设置允许跨域
 * @returns {Promise<any>}
 */
export default function urlToCanvas (url) {
	return new Promise((resolve) => {
		var image = new Image();
		// 先设置图片跨域属性
		image.crossOrigin = 'Anonymous';
		/ 再给image赋值src属性，先后顺序不能颠倒
		image.src = url;
		image.onload = function () {
			var canvas = document.createElement('CANVAS');
			// 设置canvas宽高等于图片实际宽高
			canvas.width = image.width
			canvas.height = image.height
			canvas.getContext('2d').drawImage(image, 0, 0)
			let dataURL = canvas.toDataURL("image/jpeg") // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）  			
			resolve(dataURL)	
    }
    image.onerror = () => {
      resolve({ message: '相片处理失败' })
    }
  })
}

使用：引入xxx.js文件，调用方法

// 注意引入路径不要出错
import urlToCanvas from '@/utils/xxx.js'

urlToCanvas(url).then(res => {
	// 输出图片base64
	console.log(res)
}).catch((err) => {
	// 输出图片错误信息
	console.log(err)
})

若控制台出现以下错误

原因：由于Canvas无法对跨域的图片进行操作，在纯前端利用JS通过图片的url(比如百度的图片)转化为base64，则必须使用canvas，所以必须开启允许跨域，除了当前执行canvas前开启跨域（image.crossOrigin = ‘Anonymous’）外，服务端也必须开启允许跨域。