JS 截取图片(img)标签中一块区域的内容转为base64编码

Posted 2023-05-07

做的一个移动端网页，用户可以多点触控缩放图片（这个功能我已经做好了），现在需要的是，截图心形区域（区域位置我已经计算好）转为base64编码，然后将编码传到服务器

就是能将img标签中某个区域中的内容转为base64编码

能不用插件尽量不要用吧，给最高分，希望能认真帮忙解决一下！要代码不要思路！谢谢！

参考技术A /**
* Convert an image
* to a base64 string
* @param String url
* @param Function callback
* @param String [outputFormat=image/png]
*/
function convertImgToBase64(url, callback, outputFormat)
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function()
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback.call(this, dataURL);
canvas = null;
;
img.src = url;


这个方法试试吧！！！！追问

图片中的数据也是base64的，不是url

追答

这个url就是经过编码的啊，也就是你要的结果！！！

追问

我是说我img标签src中的就是base64编码，不是文件链接。
而且我要的是截取一块区域内的，你这只是转编码

js解决img标签加载失败显示默认图片

问题:

　　为所有显示楼盘的页面添加一个加载失败的默认图片.

基本思路:

　　img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片.

$(function(){
	//注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件
	$("img").attr("onerror","this.src=‘img/error.jpg;this.onerror=null;‘");
	//遍历img标签,再次重新加载
	$("img").each(function(){
		this.src = this.src;
	});
	
});

　　注意:在页面加载的时候添加,并且添加完成后清空onerror,否则会一直循环请求.