ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLキャンバス内の画像をlocal_html/css_WEB-ITnoseに保存します。

HTMLキャンバス内の画像をlocal_html/css_WEB-ITnoseに保存します。

WBOY
WBOYオリジナル
2016-06-24 11:47:291213ブラウズ

これを実行したい場合は、次のことができます:

  • js を直接操作して保存
  • ポストバック保存
  • js を直接操作して保存

    ms が公式の解決策を提供します。以下を参照してください:
    ローカルに保存キャンバス画像
    デモアドレス

    IE10 での効果はまだ良好ですが、他の IE バージョンはテストされていません。
    残念ながら、Chrome などの他のブラウザではサポートされていません。

    ポストバックの保存

    もう 1 つの解決策は、キャンバス内のコンテンツを取り出し、サーバーにポストバックし、ファイル ダウンロード方法を使用して画像をローカルに保存することです。

    これを行った後、サーバーに戻ったところ、データトラフィックはそれほど小さくありませんでした(もちろん、実際に大規模ではない限り、現在のネットワーク速度とサーバー構成ではまだ小さいですが)。そうですね、個人的にはこれ以上の解決策はまだありません。

    キャンバスのコンテンツ (QR コードなど) を編集する必要がなく、表示用の画像や画像を動的に生成するだけの場合は、サーバー側で GD などのプログラミングを直接使用してメモリ画像や画像を生成することもできます。それらをクライアントに表示します (または、一時サーバー ファイルを生成し、不要になったら削除します)。
    上記の方法と比較して、この方法は画像処理をサーバーに任せるため、サーバーのCPU使用率に高い負荷がかかります。クライアント側で生成された場合、分散エフェクトは ^_^

    例 (asp.net mvc - razor):

    <form method="post" action="../Download" target="_blank" style="display:none" id="form_download"></form>@section scripts{    <script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>    <script type="text/javascript" src="~/Scripts/qrcode.min.js"></script>    <script type="text/javascript"> var url = "@Html.Raw(Url.Action("CheckTicket", "MeetingCenter", new { area = "wxfuns", id = Model.Id }).EncodeUrlWithOauth(Model.WxAcct.AppId))"; $("#qrcode").qrcode({ //render: "canvas", //table|canvas方式 width: 400, //宽度 height: 400, //高度 text: url //任意内容 }); //$("#qrcode").qrcode("@ViewBag.url"); function saveAsLocalImage() { // 如果使用getElementById或者$("#qrcode")的方式,会报错说不支持toDataURL方法 var myCanvas = document.getElementsByTagName('canvas')[0]; var image = myCanvas.toDataURL("image/png"); // 这个form动态生成也行 var f = $('#form_download'); // 命名带上“1”是为了提醒以后可以做成多个的键值对 var name1 = $('<input name="name1" type="text" value="@Html.Raw(Model.Title)" />'); var val1 = $('<input name="val1" type="text" value="' + image + '" />'); name1.appendTo(f); val1.appendTo(f); f.submit(); // 因为这个f不是动态生成的,需要清空这个form,否则第二次提交就有问题了。 f.html(""); } </script>}
    public ActionResult Download(FormCollection collection){    try    {        // 一样的,命名带上“1”是为了提醒以后可以做成多个的键值对        string name1 = collection["name1"];        string val1 = collection["val1"];        if (string.IsNullOrEmpty(name1) || string.IsNullOrEmpty(val1) || (val1.StartsWith("data:image/png;base64") == false))        {            return new EmptyResult();         }        var base64 = val1.Substring(22);        byte[] bytes = Convert.FromBase64String(base64);        MemoryStream memStream = new MemoryStream(bytes);        return File(memStream, "application/octet-stream", Server.UrlEncode(name1 + ".png"));    }    catch (Exception ex)    {        return Content(ex.Message);    }}
    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。