小弟无才，复下来是这样的，运行不了

.wx_button {

border-spacing:0px;

border-style: solid;

border-color: #38f;

border-width: 1px;

display: inline-block;

line-height: 2em;

text-align: center;

vertical-align: middle;

background-color: #f8f8f8;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.wx_image {

width: 73px;

height: 73px;

margin: 1px;

border:1px solid #000;

}

.wx_list {

margin: 0;

padding: 0;

font-size: 0;

}

.wx_doing {

position: fixed;

top: 40%;

height: 4em;

left: 20%;

right: 20%;

background-color: #FFF;

border: 3px solid #000;

display: inline-block;

line-height: 4em;

vertical-align: middle;

text-align: center;

}

微信四九城

微信四九城

---

GX Software 2020 by 南郊居士

var touchdown = false, preclick;

var l, t;

var img;

var doing = false;

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r)

{

if (w < 2 * r) {

r = w / 2;

}

if (h < 2 * r) {

r = h / 2;

}

this.beginPath();

this.moveTo(x + r, y);

this.arcTo(x + w, y, x + w, y + h, r);

this.arcTo(x + w, y + h, x, y + h, r);

this.arcTo(x, y + h, x, y, r);

this.arcTo(x, y, x + w, y, r);

this.closePath();

return this;

}

CanvasRenderingContext2D.prototype.heart = function (x, y, r)

{

this.translate(x, y);

this.beginPath();

this.moveTo(-0.004082 * r, -0.683418 * r);

this.bezierCurveTo(-0.15102 * r, -1.030357 * r, -0.591837 * r, -1.11199 * r, -0.865306 * r, -0.793622 * r);

this.bezierCurveTo(-1.036735 * r, -0.577296 * r, -1.02449 * r, -0.275255 * r, -0.914286 * r, -0.014031 * r);

this.bezierCurveTo(-0.738776 * r, 0.369643 * r, -0.338776 * r, 0.581888 * r, -0.004082 * r, 0.998214 * r);

this.bezierCurveTo(0.17551 * r, 0.745153 * r, 0.693878 * r, 0.385969 * r, 0.84898 * r, 0.096173 * r);

this.bezierCurveTo(1.044898 * r, -0.173214 * r, 1.053061 * r, -0.66301 * r, 0.812245 * r, -0.846684 * r);

this.bezierCurveTo(0.538776 * r, -1.107908 * r, 0.183673 * r, -1.026276 * r, -0.004082 * r, -0.683418 * r);

this.closePath();

this.translate(-x, -y);

return this;

}

function isSafari()

{

return (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));

}

function loadPic(e)

{

if (doing) {

return;

}

var selectedFile = document.getElementById("upload_input").files[0];

readFileData(selectedFile, function(image) {

const test = document.getElementById("upload_input");

test.outerHTML = test.outerHTML;

const count = document.getElementById("nine").checked ? 9 : 4;

l = t = 0;

document.getElementById("enlarge").value = 0;

const can = document.getElementById("canvas");

try {

returnToEdit(false);

can.width = can.height = Math.min(window.innerWidth * 0.95, window.innerHeight * 0.75);

if("ontouchstart" in window) {

can.addEventListener("touchstart", down, false);

can.addEventListener("touchmove", move, false);

window.addEventListener("touchend", up, false);

}

else {

can.addEventListener("mousedown", down, false);

can.addEventListener("mousemove", move, false);

window.addEventListener('mouseup', up, false);

}

draw();

window.scrollTo(0, can.offsetTop);

}

catch(e) {}

});

}

function readFileData(file, callback)

{

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e) {

img = new Image();

img.src = e.target.result;

img.onload = function() {

var s = img.src.match(/data:.*;/)[0].match(/image.*;/)[0].match(/.*[^;]/)[0];

document.getElementById("qua").style.display = (s == "image/jpeg" || s == "image/webp") ? "" : "none";

callback(img);

}

}

}

function draw()

{

if (!img) {

return;

}

const count = document.getElementById("nine").checked ? 9 : 4;

const len = Math.min(img.width, img.height);

const can = document.getElementById("canvas");

const ctx = can.getContext("2d");

const width = can.width;

const e = document.getElementById("enlarge").value;

if (l + len / e > img.width) {

l = img.width - len / e;

}

else if (l < 0) {

l = 0;

}

if (t + len / e > img.height) {

t = img.height - len / e;

}

else if (t < 0) {

t = 0;

}

ctx.clearRect(0, 0, can.width, can.height);

ctx.save();

switch(getRadioValue("style"))

{

case 1:

ctx.roundRect(0, 0, width, width, width / Math.sqrt(count) / 2);

ctx.clip();

break;

case 2:

ctx.beginPath();

ctx.arc(width / 2, width / 2, width / 2, 0, 2 * Math.PI);

ctx.clip();

break;

case 3:

ctx.heart(width / 2, width / 2, width / 2);

ctx.clip();

break;

}

ctx.drawImage(img, l, t, len, len, 0, 0, width * e, width * e);

if (count == 9) {

const cw = width / 892 * 8;

ctx.clearRect(width / 3 - cw / 2, 0, cw, width);

ctx.clearRect(width / 3 * 2 - cw / 2, 0, cw, width);

ctx.clearRect(0, width / 3 - cw / 2, width, cw);

ctx.clearRect(0, width / 3 * 2 - cw / 2, width, cw);

}

else {

const cw = width / 592 * 8;

ctx.clearRect(width / 2 - cw / 2, 0, cw, width);

ctx.clearRect(0, width / 2 - cw / 2, width, cw);

}

ctx.restore();

}

function getPos(c, e)

{

var box = c.getBoundingClientRect();

var x1, y1;

if ("ontouchstart" in window) {

if (e.targetTouches.length) {

x1 = e.targetTouches[0].clientX;

y1 = e.targetTouches[0].clientY;

}

else {

x1 = e.changedTouches[0].clientX;

y1 = e.changedTouches[0].clientY;

touchdown = false;

}

}

else {

x1 = e.clientX;

y1 = e.clientY;

}

return {

x: (x1 - box.left) * (c.width / box.width),

y: (y1 - box.top) * (c.height / box.height)

};

}

function prevent(e)

{

if(window.event) {

window.event.returnValue = false;

}

else {

e.preventDefault();

}

}

function down(e)

{

if (doing) {

return;

}

prevent(e);

const p = getPos(document.getElementById("canvas"), e);

if ("ontouchstart" in window) {

if (!touchdown) {

touchdown = true;

}

else {

return;

}

}

preclick = p;

}

function up(e)

{

getPos(document.getElementById("canvas"), e);

if (touchdown) {

return;

}

preclick = null;

}

function move(e)

{

if (!preclick) {

return;

}

const en = document.getElementById("enlarge").value;

const p = getPos(document.getElementById("canvas"), e);

const len = Math.min(img.width, img.height);

const can = document.getElementById("canvas");

l -= (p.x - preclick.x) / can.width * len / en;

t -= (p.y - preclick.y) / can.height * len / en;

draw();

preclick.x = p.x;

preclick.y = p.y;

}

function make()

{

setDoing(true);

try {

const e = document.getElementById("enlarge").value;

const len = Math.min(img.width, img.height);

const can = document.createElement("canvas");

can.width = can.height = len;

const ctx = can.getContext("2d");

var s = img.src.match(/data:.*;/)[0].match(/image.*;/)[0].match(/.*[^;]/)[0];

if (document.getElementById("alpha").checked && getRadioValue("style") != 0) {

s = "image/png";

ctx.clearRect(0, 0, can.width, can.height);

}

else if (!document.getElementById("alpha").checked) {

ctx.fillStyle = "#fff";

ctx.fillRect(0, 0, len, len);

}

switch(getRadioValue("style"))

{

case 1:

ctx.roundRect(0, 0, len, len, len / Math.sqrt(document.getElementById("nine").checked ? 9 : 4) / 2);

ctx.clip();

break;

case 2:

ctx.beginPath();

ctx.arc(len / 2, len / 2, len / 2, 0, 2 * Math.PI);

ctx.clip();

break;

case 3:

ctx.heart(len / 2, len / 2, len / 2);

ctx.clip();

break;

}

ctx.drawImage(img, l, t, len, len, 0, 0, len * e, len * e);

var i = new Image();

i.src = can.toDataURL(s, 1);

i.onload = function() {

const len = this.width;

const count = document.getElementById("nine").checked ? 9 : 4;

const can = document.createElement("canvas");

const ctx = can.getContext("2d");

const quality = document.getElementById("quality");

let inner = "";

if (isSafari()) {

inner += "长按图片保存";

}

else {

inner += "点击图片保存";

}

var time = parseInt((new Date()).getTime() / 1000);

var s = this.src.match(/data:.*;/)[0].match(/image.*;/)[0].match(/.*[^;]/)[0];

if (count == 9) {

const size = can.width = can.height = len / 892 * 292;

for (let i = 0, x = 0, y = 0, index = 1; i < 3; i++) {

inner += '

";

x = 0;

y += size + len / 892 * 8;

}

}

else {

const size = can.width = can.height = len / 592 * 292;

for (let i = 0, x = 0, y = 0, index = 1; i < 2; i++) {

inner += '

";

x = 0;

y += size + len / 592 * 8;

}

}

inner += '

';

const r = document.getElementById("result");

r.innerHTML = inner;

r.style.display = "";

document.getElementById("make").style.display = "none";

setDoing(false);

};

}

catch(e) {

alert("转存失败！");

setDoing(false);

}

}

function returnToEdit(scroll)

{

document.getElementById("make").style.display = "";

document.getElementById("result").innerHTML = "";

document.getElementById("result").style.display = "none";

if (scroll) {

window.scrollTo(0, document.getElementById("canvas").offsetTop);

}

}

function rotate()

{

setDoing(true);

try {

const can = document.createElement("canvas");

can.width = img.height;

can.height = img.width;

const ctx = can.getContext("2d");

ctx.translate(can.width / 2, can.height / 2);

ctx.rotate(Math.PI / 2);

ctx.drawImage(img, 0, 0, img.width, img.height, -img.width / 2, -img.height / 2, img.width, img.height);

var i = new Image();

var s = img.src.match(/data:.*;/)[0].match(/image.*;/)[0].match(/.*[^;]/)[0];

i.src = can.toDataURL(s, 1);

i.onload = function() {

setDoing(false);

img = this;

l = t = 0;

draw();

}

}

catch(e) {

alert("旋转失败！");

setDoing(false);

}

}

function setDoing(d)

{

doing = d;

document.getElementById("nine").disabled = doing;

document.getElementById("four").disabled = doing;

document.getElementById("doing").style.display = doing ? "" : "none";

}

function getRadioValue(name)

{

var li = document.getElementsByName(name);

for (var i = 0; i < li.length; i++) {

if (li.checked) {

return i;

}

}

return 0;

}

function single(url, time, index)

{

if (isSafari()) {

return ``;

}

else {

return ``;

}

}

2020-2-19 22:20 上传