最近做了一个生成图片并且保存到本地的需求
h5生成图片 用HTML2canvas 但是出现了一个问题 刚开始的是有图片,然后在生成图片的一瞬间 啊·哦 图片没有了呢 很烦恼,原来是本地图片能正常显示,从服务器请求回来的图片不能展示,哦哦哦,是因为图片跨域了哦
1.让服务器设置跨域
但是我的图片是在七牛云上的 所以还是靠自己吧
2.请求回来的图片转成base64 就不存在跨域了
let sessionImgUrl = sessionStorage.getItem('userHeadImgUrl')
if(sessionImgUrl){
var url = sessionImgUrl;//imgurl 就是你的图片路径
let userImg = ''
that.getBase64(url)
.then(function(base64){
that.setState({
userHeadImgUrl:base64
},()=>{
that.drawCanvas()
})
},function(err){
console.log(err);//打印异常信息
});
}else{
that.setState({
userHeadImgUrl:Images.hemai_header_icon
},()=>{
that.drawCanvas()
})
}
}
getBase64(img){
function getBase64Image(img,width,height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}