URI(Uniform Resource Identifier):统一资源标识符,服务器资源名被称为统一资源标识符
URL(Uniform Resource Locator):统一资源定位符,描述了一台特定服务器上某资源的特定位置
function getBase64(url, callback) {
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image()
var dataURL = ''
Img.setAttribute('crossorigin', 'anonymous') // 注意设置图片跨域应该在图片加载之前 (本地图片则不需要此设置)
Img.src = url
Img.onload = () => {
//要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas") //创建canvas元素
var width = Img.width //确保canvas的尺寸和图片一样
var height = Img.height
canvas.width = width
canvas.height = height
canvas.getContext("2d").drawImage(Img, 0, 0, width, height) //将图片绘制到canvas中
dataURL = canvas.toDataURL("image/jpeg", 1) //转换图片为dataURL 图片质量0~1默认值0.92
callback ? callback(dataURL) : null; //调用回调函数
}
}
// 调用生成 URL(Uniform Resource Locator统一资源定位符
// DataURL 格式:data:[<mediatype>][;base64],<data>
getBase64('http://www.topfe.cn/wp-content/cache/Beginning/thumbnail/4dacbe492d7a-170x120.jpg', (dataURL) => {
console.log(dataURL)
})