How to use a html file as a source of image file in tag

Question

I'm trying to use an html file as a source of an image file in <img src=""> tag to avoid mixed-content warning over https while using an http image.

Example:

index.html:

<img src="./image.html" >

image.html:

function getBase64FromImageUrl(url) {
      var img = new Image();
    
      img.setAttribute('crossOrigin', 'anonymous');
    
      img.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.width =this.width;
          canvas.height =this.height;
    
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0);
    
          var dataURL = canvas.toDataURL("image/png");
          dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
          document.write(dataURL);
      };
    
      img.src = url;
    }
    getBase64FromImageUrl("http://www.w3schools.com/css/trolltunga.jpg");

<meta http-equiv="Content-type" content="image/png"/>


<!--
I do not want to add any child tags to the body in order to display image from this base64 data. i just want to display using the content headers.
-->

and I'm trying to use the image data that I dump into the html file using javascript now when I tried to open the Html file and I see a string that represents an encoded URL containing the grabbed graphical data but not the actual image as the headers are not set, even though I tried setting the content headers using meta tag in html file, nothing helped. I tried setting the content headers using .httaccess file but no use.

I know it is possible to use any server side script as the content headers that we set are sent from the server along with the response to the http request.

example:

image.php

<?php
  header("Content-Type: image/png");
  readfile("www.example.com/img.png");
?>

index.html

<img src="./image.php" >

I'm able to do this with php but I actually want to use html and javascript.

The main Idea is to be able to use http images over https without getting a mixed content warning.

`use a html file as a source of image` - you can't. `to avoid mixed-content warning` - you can't do that either. Preventing mixed content is a security feature. If you want to avoid it for yourself, find and 1990's browser and use that — Jaromanda X, Jan 21 '17 at 10:18
Just check this link [How to get full path of selected file on change of using javascript, jquery-ajax?](http://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav) — Arun Sudhakaran, Jan 21 '17 at 10:39
@JaromandaX it is possible to avoid mixed-content warning using PHP. I have already done that. Now I'm trying to implement the same using HTML and javascript. you can check it for yourself: https://dukaanbabu.com/beta/api/image.php — gnath, Jan 21 '17 at 10:42
You can’t set the Content-Type HTTP header on the client side using the `meta` element, nor can you use a `meta` element to otherwise somehow change the content type of a resource. Browsers are just going to use the value of the real Content-Type HTTP header the Web server sends in the response (which I’d assume is `text/html`). Or if for some reason the Web server isn’t sending any Content-Type at all in the response, you’re still not going to be able to make browsers see it as some other content-type just by using the `meta` element. — sideshowbarker, Jan 21 '17 at 11:06
@sideshowbarker Thanks for your response. we can always force the server to send the response in whatever Content-Type we like using .httaccess **Example:** `AddType 'image/png' .html` — gnath, Jan 21 '17 at 11:29

score 1 · Answer 1 · answered Jan 21 '17 at 16:14

So you might be better off dealing with an XHR and the FileReader API, like below:

var b64xhr = new XMLHttpRequest();
    b64xhr.open( "GET", url );
    b64xhr.responseType = "blob";
    b64xhr.onload = function (){
        if (b64xhr.status===200){
            reader.readAsDataURL( b64xhr.response );
        }
        else if (b64xhr.status===404){
            // error
        }
    };
var reader = new FileReader();
    reader.onloadend = function () {
        console.log (reader.result );
    };
b64xhr.send();

This doesn't involve any sort of hack, but does have limited compatibility

How to use a html file as a source of image file in tag

1 Answers1