canvas截取base64图片

2019独角兽企业重金招聘Python工程师标准>>>

//html
<button type="button" class="btn fileinput-button upload-img">
    <span class="iconfont icon-upload-alt"></span>
    <span>Browse File</span>
    <input type="file" name="upload-file" id="upload-file">
</button>

//js
$('#upload-file').on('change', function(){
	var reader = new FileReader();
	reader.onload = function(e) {
		console.log(e.target.result);
		var canvas = document.createElement("canvas");
		canvas.width = 150;
        canvas.height = 150;
        var context = canvas.getContext("2d");
        context.drawImage(this.image, 0, 0, 100,100);
        var imageData = canvas.toDataURL('image/png');
        console.log(imageData);
	}
	reader.readAsDataURL(this.files[0]);
})

可以通过jquery插件jcrop选取需要截取的大小或者坐标

转载于:https://my.oschina.net/kimyeongnam/blog/1791217