如何在微信公众号开发中实现图片裁剪

最新推荐文章于 2024-08-08 08:30:02 发布

bribb

最新推荐文章于 2024-08-08 08:30:02 发布

阅读量1.6w

点赞数

文章标签：微信公众号开发图片裁剪

本文链接：https://blog.csdn.net/a1a1a1a1s/article/details/51812376

版权

接触微信公众号开发已经有一段时间了，发现其实和网页开发差不多，但是因为浏览器的不同，自己也碰过一些坑，其中就有怎么实现图片裁剪功能。

一开始我是用PC端的思路去做的，首先在本地获取图片路径，然后在网页中显示，最后在本地裁剪，然后把裁剪好的图片转换成base64数据，上传到服务器。做完之后，我为

了测试，我是直接把图片路径写到img里面的，省略了选择图片这个步骤，最后在微信测试是通过的。但是我把选择图片的步骤加上之后，就出了问题。

我是用cropper框架（不支持jq的版本）实现的，因为这个框架支持移动端操作的，下面我就把这个过程中出现的问题写一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/cropper.css" />

		<style>
			.img-content img {
				max-width: 100%;
			}
		</style>

	</head>

	<body>
		<div class="img-content">
			<!--src是微信的图片ID，可以直接在img里面显示-->
			<img id="photo" src="wxLocalResource://488970461173136">
		</div>

		<button id="confirm">确定</button>

	</body>
	<script type="text/javascript" src="js/cropper.js"></script>
	<script>
		var photo = document.getElementById("photo");
		var cropper = new Cropper(photo, {
			aspectRatio: 1,
		});
	
		document.getElementById('confirm').addEventListener('click', function() {
			var canvas=cropper.getCanvasData();
			var base64Data=canvas.toDataURL("image/jpeg",1);
			alert(base64Data);
		});
	</script>

</html>

上面那段代码在微信端运行的时候，js部分会报错

1，