简单直接的图片转换马赛克在线工具
本功能已经迁移至 在线工具栏目 一键给任意照片/图片添加圆点风格或方块个性的马赛克效果
用法很简单:点击上方 选择文件 按钮 选择图片文件 耐心等待一小会即可
图片文件越大处理需要的时间也就越久
var myCanvas = document.getElementById('myCanvas');
var painting = myCanvas.getContext('2d');
$("#testFile").change(function () {
run(this);
});
function load(base64) {
var index = layer.load(1, {
shade: [0.8,'#fff']
,time:10000
});
setTimeout(function () {
var index = layer.load(1, {
shade: [0.1, 'red'] //0.1透明度的白色背景
});
//生成一个图片节点
var imgNode = new Image();
imgNode.src = base64;
//调用函数
drawImg(imgNode);
layer.closeAll();
}, 1000);
}
function drawImg(imgNode) {
imgNode.onload = function () {
myCanvas.width = imgNode.width;
myCanvas.height = imgNode.height;
painting.clearRect(0, 0, imgNode.width, imgNode.height);
painting.drawImage(imgNode, 0, 0, imgNode.width, imgNode.height);
var size = 5;
if (imgNode.width < 100) {
size = 5;
} else if (size < 300) {
size = 8;
}
else if (size < 500) {
size = 10;
}
else if (size < 800) {
size = 15;
}
else {
size = 20;
}
//获取老图所有像素点
var oldImg = painting.getImageData(0, 0, imgNode.width, imgNode.height)
//创建新图像素对象
var newImg = painting.createImageData(imgNode.width, imgNode.height)
for (var i = 0; i < oldImg.width; i++) {
for (var j = 0; j < oldImg.height; j++) {
//从5*5中获取单个像素信息
var color = getPxInfo(oldImg, Math.floor(i * size + Math.random() * size), Math.floor(j * size + Math.random() * size))
//写入单个像素信息
for (var a = 0; a < size; a++) {
for (var b = 0; b < size; b++) {
setPxInfo(newImg, i * size + a, j * size + b, color);
}
}
}
}
painting.putImageData(newImg, 0, 0);
$("#myCanvas").show();
layer.closeAll();
}
}
//读取单个像素信息
function getPxInfo(imgDate, x, y) {
var colorArr = [];
var width = imgDate.width;
colorArr[0] = imgDate.data[(width * y + x) * 4 + 0]
colorArr[1] = imgDate.data[(width * y + x) * 4 + 1]
colorArr[2] = imgDate.data[(width * y + x) * 4 + 2]
colorArr[3] = imgDate.data[(width * y + x) * 4 + 3]
return colorArr;
}
//写入单个像素信息
function setPxInfo(imgDate, x, y, colors) {
//(x,y) 之前有多少个像素点 == width*y + x
var width = imgDate.width;
imgDate.data[(width * y + x) * 4 + 0] = colors[0];
imgDate.data[(width * y + x) * 4 + 1] = colors[1];
imgDate.data[(width * y + x) * 4 + 2] = colors[2];
imgDate.data[(width * y + x) * 4 + 3] = colors[3];
}
function run(input_file) {
if (typeof (FileReader) === 'undefined') {
layer.msg("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
}
else {
try {
/*图片转Base64 核心代码*/
var file = input_file.files;
for (var i = 0; i < file.length; i++) {
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file[i].type)) {
layer.msg("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function () {
$("#SelectPhotoImg").attr("src", this.result);
load(this.result);
}
return reader.readAsDataURL(file[i]);
}
} catch (e) {
layer.msg('图片转Base64出错啦!' + e.toString())
}
}
}