2

背景画像と一緒にエクスポートするにはどうすればよいですか?

デモ : http://59.127.247.144/AmhsGlassrecord/

結果を取得したい : ここに画像の説明を入力してください

Javascript

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});
4

2 に答える 2

2
  • JavaScript を使用してキャンバスに画像を描画する必要があります。CSS は機能しません。
  • 署名パッドにある背景画像は別のドメインからのものです。ドメイン内にある必要があります。そうしないとエクスポートできません。そうしないと、汚染されたキャンバス エラーが発生します。

画像を描画するには、次のコードを使用します (ただし、画像がアプリの同じドメインでホストされていることを確認してください)。

ラッパーだけでなく、キャンバスにも ID を付与します。

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

var background = new Image();
// The image needs to be in your domain.
background.src = "http://dkpopnews.fooyoh.com/files/attach/images4/14989425/2015/1/14995985/thumbnail_725x300_ratio.jpg";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function() {
    ctx.drawImage(background, 0, 0);
};

function action() {
    // draw the image on the canvas
    ctx.drawImage(background, 0, 0);

    //// Then continue with your code 
    var wrapper = document.getElementById("signature-pad"),
        clearButton = wrapper.querySelector("[data-action=clear]"),
        saveButton = wrapper.querySelector("[data-action=save]"),
        canvas = wrapper.querySelector("canvas"),
        signaturePad;

    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);
    var signaturePad = new SignaturePad(canvas);
    signaturePad.minWidth = 1;
    signaturePad.maxWidth = 1;
    signaturePad.penColor = "rgb(66, 133, 244)";

    clearButton.addEventListener("click", function(event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function(event) {
        if (signaturePad.isEmpty()) {
            alert("Please do not blank.");
        } else {
            //document.getElementById("hfSign").value = signaturePad.toDataURL();
            window.open(signaturePad.toDataURL());
        }
    });
}

それは最初は画像でうまくいくでしょう。ユーザーがクリアボタンをクリックしたときに、画像を再度描画する必要があることに注意してください。

次のデモは、画像の代わりに色を使用して動作します。

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

function setBackground(color){
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

//// Then continue with your code 
var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";
setBackground("#0e2630");

clearButton.addEventListener("click", function(event) {
    signaturePad.clear();
    setBackground("#0e2630");
});

saveButton.addEventListener("click", function(event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});

そして結果：

署名結果

于 2016-08-11T11:32:55.177 に答える
-1

signaturePad の backgroundColor を設定するだけです。

var signaturePad = new SignaturePad(canvas,
{
    backgroundColor: "rgba(0, 0, 0, 1)"
});
于 2016-08-11T11:36:44.190 に答える