Как добавить ссылку на скачивание на холст после изменения изображения? - PullRequest
Новая
       2

Как добавить ссылку на скачивание на холст после изменения изображения?

0 голосов
/ 30 марта 2019

я пытаюсь создать ссылку для загрузки моего изображения после того, как изображение поворачивается после того, как вы щелкнете по нему, а затем нажмите кнопку загрузки, чтобы получить новое измененное изображение, спасибо ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Flipping photo in a canvas tag</title>
  <style>
    #canvas {cursor: pointer;}

       canvas {
    height: 50vh;    

    }  


    </style>
</head>
<body>




<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>

    <h1>Example of using <code>&lt;canvas&gt;</code></h1>

    <p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag
    and then flipped.</p>

    <p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>

    <canvas id="canvas" style="border:1px red solid;"></canvas>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">




        var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);


        var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');




        var img = new Image();


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){

        img.onload = function(){
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            ctx.save();
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}




        can.onclick = function() {
            console.log('here');
            ctx.translate(img.width-1, img.height-1);
            ctx.rotate(Math.PI);
            ctx.drawImage(img, 0, 0, img.width, img.height);

        };    


    </script>


    <p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

Вы можете попробовать это, просто имейте в виду, что не все браузеры поддерживают canvas.toBlob ().

Передайте переменную Canvas can из вашего кода. 

function downloadAsFile( canvas, imagename, mime ) {
    mime = mime || 'image/png';
    imagename = imagename || 'canvasImage.png';
    canvas.toBlob( blob => {
      if ( window.navigator.msSaveBlob ) { // IE and Edge
        window.navigator.msSaveBlob( blob, imagename );
      }
      else { // Chrome, Firefox.  Not tested: Safari 
        const url = window.URL.createObjectURL( blob );
        const a = document.createElement( 'a' );
        document.body.appendChild( a );
        a.href = url;
        a.download = imagename;
        a.setAttribute( 'style', 'display:none;' );
        a.click();
        setTimeout( () => {
          window.URL.revokeObjectURL( url );
          document.body.removeChild( a );
        }, 2000);
      }
    }, mime );
  }
0 голосов
/ 30 марта 2019

Если вы преобразуете холст в URL-адрес данных, вы можете добавить его в качестве атрибута href к элементу ссылки с атрибутом загрузки.

HTML: 

<canvas id="canvas"></canvas>
<a download="new-image.png" id="download">Download</a>

Javascript: 

var canvas = document.getElementById('canvas');
var button = document.getElementById('download');
button.setAttribute( 'href', canvas.toDataURL('image/png', 1) )

Рабочий пример: https://jsfiddle.net/x867ycek/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...