Base64 encoding

Хорошо, я приближаюсь к концу проекта, и я столкнулся с небольшой техникой. Чтобы исправить это легко, мне нужен способ взять элемент html в javascript и закодировать его в строку base64?Base64 encoding

Я знаю, что это возможно с холстом - так как я работаю в данный момент, но сейчас проект требует другого подхода по другим техническим причинам.

Любая помощь или рекомендации о том, как извлечь img src и закодировать его в строку base64, будет потрясающе.

Кажется, что метод dataURL работает только с холстом ??

источник

2014-12-05 user61026

Пожалуйста, посмотрите на это [SO вопрос] (http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using -javascript). Я думаю, что для вас должен быть ответ. – AWolf

Я понимаю метод холста, как указано в вашем сообщении ... но из-за требований моего проекта я не могу использовать холст в этом экземпляре ... следовательно, вопрос. – user61026

WOM (Окно Object Model) поставляется с двумя методами: atob и btoa

Вы можете назвать их как: window.atob(str) или просто btoa(str)

btoa кодирует строку Base-64 atob декодирует строку в Base-64

источник

2014-12-05 00:23:28 SirPython

так я прав, говоря, что это будет кодировать изображение src? – user61026

@ user61026 Если источником изображения является строка, да - это будет. – SirPython

Я не совсем уверен, правильно ли я это понял, но если вы хотите кодировать изображение из своего html, вы можете сделать это, как в демо ниже.

Там я создал элемент холста, который доступен только в js. Затем нарисуйте свое изображение на этом «виртуальном» холсте, а затем вы можете использовать toDataURL(), чтобы сделать кодировку base64.

В демоверсии я проверил кодирование, вернув это изображение обратно в выходной div.

Изображение в разметке, которую я использовал, кодируется base64, потому что у меня были проблемы с перекрестным происхождением при ctx.drawImage(...), но если вы используете изображение из того же источника, что не должно быть проблемой.

Вы можете найти то же самое демо здесь, jsFiddle.

$(function() { 
 
    var $sourceImg = $('#sourceImg'); 
 
    var $canvas = $('<canvas/>'); 
 
    var $out = $('#output'); 
 
    
 
    $canvas.prop({"width": $out.width(), "height": $out.height()}); 
 
    
 
    var ctx=$canvas.get(0).getContext("2d"); 
 
    //console.log($sourceImg.prop('src')); 
 
    // draw image on canvas 
 
    var img = new Image(300,300); 
 
    img.src = $sourceImg.prop('src'); 
 
    ctx.drawImage(img,0,0); 
 
    
 
    // convert canvas to base64 image 
 
    var base64img = $canvas.get(0).toDataURL(); 
 
    //console.log(base64img); 
 
    
 
    // test if encoding is correct 
 
    var img = new Image(); 
 
    img.src = base64img; 
 
     
 
    $("#output").append(img); 
 
});

#output { 
 
    display: block; 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <!-- used base64 encoded image because of security error with cross-origin image directly from http://placehold.it/300x300 --> 
 
    
 
    <img src="data:image/png;base64,R0lGODdhLAEsAeMAAMzMzJaWlsXFxaqqqpycnKOjo76+vre3t7GxsQAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAEsAQAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8eP/iBDihxJsqTJkyhTqlzJsqXLlzB1CRhAIACBAgY0zKxJYIAAnTRt+ryx0yZOoDyHZija82ewAwGiSg2AAIOBmlMJ5LxwdarNrTOgeqVqFatUrWW9ov1lYKzUAxYEmM16Qa5bAjTaug0At4LdsXjjzj0LzCwCAWKjOp2AQKrPAVKrVmgc9XHkGYYRT10sgXIAy1ElU/AMmmwvvaYBeO47gbAEsxZcA4AdA7Xo1RVk06agW6ovAY0DSxDgmIJtxlLBAjjeOXkM4DYpEK9s/HLzqMqZq3b+izMAqQVGc19u/XoAsNqf544aHjn2Cek9oy8vbPpnCgV882aPX39r/hmY/tUeAPlFJdwH9g3QX1TrBTAggf5JAF4xuE2A1YGzGUjBhRVwmIFXP9nHYAgVvqbhhieaGB2KKwIjgACoPZhhiyoe6KGFKV7gVVWejdjBizF2mOOMNg554y9qeTfhggHs52AFBTa51F94mfXiB0k2KGOUTm4ZoS9eKSchgBNw+d+TTHKwGn0dhBkbmRKYOSaaZX7Zy1iszemlj9/BCSGfAaolAp5aQhnhknUCypaVXRrKJ6Jx2nlBYlHlCUJXijWa5pl7SjlMYqIRKSSNR4ragVkYhgAqixgeWWqpwchmKo6kGjlkBlHKOGiOr/JqK43CyPmnp3puymkHlPJlgrDC/vZJ57CF9gKcpcJ6tph9oVo7AbanCvojAtRGqO1w9I0LALe8iNVqjqixJl91lbp3HgeJ1Uvvrwe2K292b+3by6oSpOescLudSbCkFmAVXoGpWgAweaE1eLCivSmaS2aYBuAdadBFPJljHaeGQchwgepdwpHByKh4lYUcqnk+efayLslONfNfWfo1mIEnN9jiYBrUzOa5O9t0Ms5Z9ZyL0Apy5ZaY8D3Ngc3yWkwB01ZJ7fRYUPNSlIOW+hVUU0gJpbTP19K1wdcFhC3d2EqNDPfZMdVt991456333nz37fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlaZhnrvnmnHfu+eeghy766KSXbvrpqKeu+uqst+7667DHLvvstNdu++2456777rz37vvvwAcv/PDEF2/88cgnr/zyzDfv/PPQRy/99NRXb/312Gev/fbcd+/99+CHL/745Jdv/vnopz9MBAA7" id="sourceImg"/> 
 
    <div id="output"> 
 
     <h2>test ouput of base64 encoded image:</h2> 
 
    </div> 
 
</div>

источник

2014-12-05 10:49:38 AWolf

Base64 encoding

ответ

Смежные вопросы