1

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 で開くと、画像がクリップされて約 960px に保たれることです。

したがって、フルブラウザでは次のようになります。

XX-----フル画像----xx

フルブラウザからのサイズ変更では、まだ見栄えがします:

xx-リサイズ画像--xx

小さい画面画面からのロード時

xx-----フルイマ

どんな助けでも大歓迎です。また、設計全体が流動的であることを意図しており、この小さな障害を除いて、これまでのところ機能していることを覚えておくとよいでしょう.

4

1 に答える 1

0

よくわかればイメージはある

img1
(出典: salestemplate.com )

(白い部分は白です)。

そして、あなたはに変換したい

ここに画像の説明を入力

(白い部分は透明です)。

次に、透明なものを取得したら、base64 でエンコードされた画像を取得できます。

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA78AAADkCAYAAABQQZMzAAAgAElEQVR4nOy955Mk252el/bkSZ9ZWd679r572kxPj+3x3pvr5nqDC1wAC3OxIBZYYBfcpSjFUhRD1JIRCumLDMVgKPQPPvqQVTXVM5XV9/YsCCnID0+8VWlPZeXJ...

(簡潔にするために残りを省略)

次に、それをブラウザの URL バーに貼り付け、コンピュータにダウンロードし、画像をサーバーにアップロードします。

最後に、最初の .jpg の代わりに新しい透明な .png 画像を使用します。

この方法では、ユーザーがサイトにアクセスするたびに透過的なものを生成するのではなく、一度だけ生成します。

于 2012-08-29T18:45:19.503 に答える