html+js+canvas实现图片上传,下载

html

<input type="file" id="file_btn">
<canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
<div id="downImg" style="cursor: pointer;text-align: center;color: cadetblue;">下载图片</div>

JS

let file_btn = document.getElementById('file_btn');
let canvas = document.getElementById('canvas');
// 给定canvas在页面的占位,图片大于则宽高等比例缩小
canvas.width = 540;
canvas.height = 420;
// 1.监听文件上传按钮的选择文件的事件
file_btn.addEventListener("change", function () {
   let data_url = file_btn.files[0];
   console.log(data_url);
   // 2.使用FileReader类来读取文件内容
   let reader = new FileReader();
   reader.readAsDataURL(data_url);
   // 3.监听FileReader读取器读取完成事件(此事件后才可以获取到文件内容,进行图片渲染或上传)
   reader.onload = function () {
       // 3.1 异步渲染(canvas)
       let cxt = canvas.getContext('2d');
       let img = new Image();
       img.src = this.result;
       // 3.11 Image对象数据准备完成事件
       img.onload = function () {
           cxt.clearRect(0, 0, canvas.width, canvas.height);// 清空上一次的图片
           // 绘画
           let width = img.width;
           let height = img.height;
           let result = geometric_scaling(width, height, canvas.width, canvas.height);
           if (result['scale_by'] === 'none') {
               cxt.drawImage(img, (canvas.width - result['width']) / 2, (canvas.height - result['height']) / 2, result['width'], result['height'])
           }
           if (result['scale_by'] === 'width') {
               cxt.drawImage(img, 0, (canvas.height - result['height']) / 2, result['width'], result['height'])
           }
           if (result['scale_by'] === 'height') {
               cxt.drawImage(img, (canvas.width - result['width']) / 2, 0, result['width'], result['height'])
           }

       }
       // 3.2.异步上传(ajax) param = {"img":this.result}(数据格式为base64)
   }
});
// 封装等比缩小的方法
function geometric_scaling(image_width, image_height, canvas_width, canvas_height) {
    let width = image_width;
    let height = image_height;
    let scale = 1;
    let scale_by = 'none';
    let return_data = { width, height, scale, scale_by };
    if (image_height < canvas_height && image_width < canvas_width) {
        return return_data
    }
    else if (image_height > canvas_height && image_width > canvas_width) {
        // 都大
        let scale_height = canvas_height / image_height;
        let scale_width = canvas_width / image_width;
        if (scale_height < scale_width) {
            scale = scale_height;
            scale_by = 'height';
        }
        else {
            scale = scale_width;
            scale_by = 'width';
        }
    }
    // 不是都小也不是都大的剩下两种情况
    else if (image_height > canvas_height) {
        scale = canvas_height / image_height;
        scale_by = 'height';
    }
    else {
        scale = canvas_width / image_width;
        scale_by = 'width';
    }
    return_data['width'] = image_width * scale;
    return_data['height'] = image_height * scale;
    return_data['scale'] = scale;
    return_data['scale_by'] = scale_by;
    return return_data
}

// 保存成png格式的图片
function saveAsPNG(canvas) {
    return canvas.toDataURL("image/png");
}
// 保存成jpg格式的图片
function saveAsJPG(canvas) {
    return canvas.toDataURL("image/jpeg");
}
// 下载canvas
function downLoad(url){
    var oA = document.createElement("a");
    oA.download = '';// 设置下载的文件名,默认是'下载'
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下载之后把创建的元素删除
}
document.getElementById("downImg").onclick = function(){
    downLoad(saveAsPNG(canvas))
}

结束~~

发布了19 篇原创文章 · 获赞 0 · 访问量 214
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览