[摘要]img.height > 300) {if (img.width > img.height) {canvas.width = 300canvas.height = img.height ...
img.height > 300) {
if (img.width > img.height) {
canvas.width = 300
canvas.height = img.height / img.width * 300
}
else {
canvas.height = 300
canvas.width = img.width / img.height * 300
}
}
//从那里开始截取图片
context.drawImage(img, 0, 0, canvas.width, canvas.height)
/*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
//压缩后的图片base64 url
/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
* qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
//var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
document.body.removeChild(span)
document.querySelector('body').appendChild(canvas)
};
}
//这是上传的
document.querySelector('button').addEventListener('click',function(){
canvas.toBlob(function(blob){
var xhr = new XMLHttpRequest()
formData.append('fileimage', blob,'002.webp')
xhr.open('POST', 'test.php', true)//默认true 为异步
//上传进度
xhr.upload.addEventListener('progress',function (e) {
console.log('上传进度为：'+ (e.loaded/e.total*100).toFixed(2)+'%')//多次出现
// event.total是需要传输的总字节，event.loaded是已经传输的字节
})
xhr.upload.addEventListener('loadstart', function () {
console.log('上传开始')//只出现一次
})
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status <300
关键词：HTML5联合canvas完成图片压缩