Question

我尝试使用html文件作为<img src="">标记中图像文件的来源，以避免在使用http图像时通过https发出混合内容警告。

示例：

的index.html：

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

image.html：

＆＃13;

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");

＆＃13;

<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.
-->

＆＃13;

我尝试打开Html文件时尝试使用javascript转换到html文件中的图像数据，我看到一个字符串表示包含抓取的图形数据的编码URL但不是虽然我尝试在html文件中使用元标记设置内容标题，但未设置标题的实际图像，没有任何帮助。我尝试使用.httaccess文件设置内容标题但没有用。

我知道可以使用任何服务器端脚本，因为我们设置的内容标头是从服务器发送的以及对http请求的响应。

示例：

image.php

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

的index.html

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

我能用php做到这一点，但实际上我想使用html和javascript。

主要的想法是能够在https上使用http图像，而不会收到混合内容警告。

Answer 1

所以你最好不要处理XHR和FileReader API，如下所示：

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();

这并不涉及任何类型的黑客攻击，但兼容性有限

如何使用html文件作为<img src=""/>标记中的图像文件源

1 个答案: