Question

我正在使用这个伟大的脚本剪辑jpegs。

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上打开它时，它会剪切图像并将其保持在大约960px，

所以在完整浏览器中它看起来像这样：

XX -----完整图像---- xx

从完整浏览器调整大小仍然看起来不错：

xx-Resized Image - xx

从较小的屏幕加载

xx ----- Full Ima

任何帮助将不胜感激。同样值得注意的是，整个设计都是流畅的，除了这个小小的障碍外，它到目前为止一直在工作。

Answer 1

如果我理解得很好，你就有了图像

img1 http://www.salestemplate.com/wp-content/uploads/2012/08/toptrim.jpg

（白色部分为白色）。

并且您想要转换为

enter image description here

（白色部分是透明的）。

然后，一旦你有透明的，你可以得到图像base64编码：

http://jsfiddle.net/fAUbp/show/

然后，将其粘贴到浏览器的网址栏，将其下载到您的计算机并将图像上传到您的服务器。

最后，使用新的transprent .png图片而不是第一个.jpg。

这样，每次用户访问您的网站时，都不会生成透明的，而是只生成一次。

如何在不剪切的情况下正确调整画布大小。特定脚本

1 个答案: