18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

Canvas上传图片,变像素图片

2020-01-06 分享

jQuery调用版本:1.11.3

效果图

页面

<canvas width="400" height="400" id="canvas">
    	<span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
    </canvas>
<div id="preview"></div>
<input type="file" id="file">

CSS

body {
	background:#333;
}
canvas {
	background:#fff;
}
#preview,.img,img {
	width:100px;
	height:100px;
}
#preview {
	border:1px solid #000;
}

JS

(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    function imgsrc(srcobj) {
        aImg = new Image();
        aImg.src = srcobj;
        aImg.onload = function() {
            draw(this);
        };
    }

    function draw(obj) {
        ctx.drawImage(obj, 0, 0, 400, 400);
        //获取图像数据
        var oImg = ctx.getImageData(0, 0, 400, 400);
        var w = oImg.width;
        var h = oImg.height;
        var arr = randomNum(w * h, w * h / 2);
        var newImg = ctx.createImageData(oImg);
        // var newImg = oImg.data;
        for (var i = 0; i < arr.length; i++) {
            newImg.data[4 * arr[i]] = oImg.data[4 * arr[i]];
            newImg.data[4 * arr[i] + 1] = oImg.data[4 * arr[i] + 1];
            newImg.data[4 * arr[i] + 2] = oImg.data[4 * arr[i] + 2];
            newImg.data[4 * arr[i] + 3] = oImg.data[4 * arr[i] + 3];

        }
        ctx.putImageData(newImg, 0, 0);
        console.log('OK');
    }

    //某区域的部分随机数
    function randomNum(iAll, iNow) {
        var arr = [];
        var newArr = [];
        for (var i = 1; i <= iAll; i++) {
            arr.push(i);
        }
        for (var i = 0; i < iNow; i++) {
            newArr.push(arr.splice(Math.random() * (arr.length), 1));
        }
        return newArr;
    }

    var fileobj = document.getElementById('file');
    fileobj.onchange = function() {
        preview(this);
    };

    //上传图像加载显示
    function preview(file) {
        var prevDiv = document.getElementById('preview');
        if (file.files[0]) //file.files &&
        {
            var reader = new FileReader(); //定义FileReader文件API用于读取文件
            reader.onload = function(evt) { //文件读取成功时触发
                prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                imgsrc(evt.target.result);
            };
            reader.readAsDataURL(file.files[0]); //四模式之一以URL方式读取文件
        } else {
            prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
        }
    }
})();
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图