canvas像素图片

Html

Css

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

(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>';
        }
    }
})();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas像素图片



代码描述：canvas像素图片,上传图片看看效果。

使用canvas做的可放入图片生成像素图片

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

请别让时间带走我

相关代码

canvas像素图片

最新