我正在使用这个很棒的脚本来剪辑 jpeg。
var polyClip = new function () {
function s(b, c) {
q[b] = new Image;
var e = q[b];
$(c).attr("data-polyclip-index", b);
$(e).bind("load", function () {
d.drawShape(b, c)
});
e.src = c.src
}
var d = this,
r, k = [],
q = [];
d.isOldIE = window.G_vmlCanvasManager;
d.init = function () {
r = $("img[data-polyclip]");
r.each(s)
};
d.drawShape = function (b, c) {
var e = $(c),
a = document.createElement("canvas");
a.width = c.offsetWidth;
a.height = c.offsetHeight;
a.id = "polyClip" + b;
var l = jQuery.trim(e.attr("data-polyclip")).split(","),
j = c.src;
k[a.id] = [];
e.replaceWith(a);
d.isOldIE && G_vmlCanvasManager.initElement(a);
for (var f = a.getContext("2d"), e = 0; e < l.length; e += 2) {
var h = parseInt(jQuery.trim(l[e])),
i = parseInt(jQuery.trim(l[e + 1]));
k[a.id].push({
x: h,
y: i
});
e == 0 ? f.moveTo(h, i) : f.lineTo(h, i)
}
if (d.isOldIE) f.fillStyle = "", f.fill(), a = $("fill", a).get(0), a.color = "", a.src = c.src, a.type = "tile", a.alignShape = false;
else {
var g = new Image;
g.onload = function () {
var a = f.createPattern(g, "repeat");
f.fillStyle = a;
f.fill();
a: {
for (var b = parseInt(jQuery.trim(l[0])), c = parseInt(jQuery.trim(l[1])), e = -1; e <= 1; e++) for (var d = 0; d <= 1; d++) if (a = f.getImageData(b + e, c + d, 1, 1).data[3], a != 0) {
a = true;
break a
}
a = false
}
a || g.src.indexOf("?chromeError") < 0 && (g.src += "?chromeError")
};
g.src = j
}
};
d.findObject = function (b) {
var c = b.currentTarget;
if ($(c).hasClass("cropParent")) return $(c);
for (var e in k) if (k.hasOwnProperty(e) && (c = $("#" + e), d.isInPolygon(c, b.pageX, b.pageY, true))) return c
};
d.isInPolygon = function (b, c, e, a) {
var d = b.get(0),
d = k[d.id],
j = d.length,
f, h, i, g, o, m, p = false,
n = {
left: 0,
top: 0
};
a && (n = b.offset());
if (j < 3) return false;
f = d[j - 1].x + n.left;
h = d[j - 1].y + n.top;
for (m = 0; m < j; m++) b = d[m].x + n.left, a = d[m].y + n.top, b > f ? (i = f, o = b, g = h, h = a) : (i = b, o = f, g = a), b < c == c <= f && (e - g) * (o - i) < (h - g) * (c - i) && (p = !p), f = b, h = a;
return p
}
};
document.write('<style type="text/css">img[data-polyclip], img.polyClip { visibility: hidden; }</style>');
polyClip.isOldIE ? $(window).bind("load", polyClip.init) : $(document).ready(polyClip.init);
它非常适合我正在做的事情。我在 div 中使用流体宽度，所以所有宽度都是基于百分比的。唯一的问题是，除非它是一个完整的浏览器屏幕，否则它会剪切画布。如果是完整浏览器，则图像渲染良好。当我在完整的浏览器中打开它并调整大小时，效果也很好。我遇到的问题是，当我在调整大小的浏览器或 iPhone 上打开它时，它会剪切图像并将其保持在大约 960 像素，
所以在完整浏览器中它看起来像这样：
XX-----全图----xx
从完整浏览器调整大小仍然看起来不错：
xx-调整大小的图像--xx
从较小的屏幕屏幕加载
xx-----全图
任何帮助，将不胜感激。还要记住，整个设计旨在保持流畅，到目前为止，除了这个小障碍外，它一直在工作。
