Question

我从控制器返回一个base64字符串来查看。 base64是正确的我在网上查了一下（base64string to image ...）在我的javascript中，我称之为：

<script>
    var crosshairImgString = {!! $crosshairPathString !!};
</script>

该字符串包含一个我想在画布上居中的图像。我尝试将它放在图像标记的src中，如下所示：

centerImageAtCanvas();
function centerImageAtCanvas() {
    var canvas = document.getElementById('imageView');
    var image = new Image();
    console.log(crosshairImgString);
    image.src = {{ $crosshairPathString }};
    image.onload = function () {
        var cxt = canvas.getContext('2d');
        cxt.drawImage(image,
             canvas.width / 2 - image.width / 2,
             canvas.height / 2 - image.height / 2
        );
    };
}

但是我收到了这个错误：

Uncaught SyntaxError：意外的令牌：

引用此部分：

var crosshairImgString = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJ9QTFRF/////6Ki/1FR/3d3/wAA//v7/3Jy//7+/+/v/8XF/42N/1dX/x0d/+Dg/46O/zs7/w8P/wEB/+bm/4iI/yws/wMD//z8/7+//zw8/wQE/z09/6Cg/xsb/wIC/6am/xUV/xAQ/0ND/4mJ/1BQ/xcX/xkZ/3Fx/8PD//Pz/0BA/1JS/76+/4WF/2ho/8HB/3V1/09P/729/4SE/8TE/+fnIHiB0wAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAGbSURBVEjH3ZZbc4JADIVX+6GiogIC9YIXVLybtvr/f1sflKkIqN3pQ8e8bSZnkk3OnqxSuVYql8vlkvqNvQG8vQTEqABUjCfDqzWz3mgCNBt1s1Z9DLBa7Y7NxexOu2U9ADlu1yNlXtd17gD84L1Hxnr9wC+89GCYFBQChEmBw5FRhBifIybTaAYwc6eTs2c+yMX4F8QiXq6SuayW8QKA8SCvtmAIEK5N43qUhrkOAYZBTq/eAbyNdTt9a+MB9DN9q7o9INw4WcI4mxDoRbfzsboAayuPY9YaoGvdJGl5wMJMztvdbrfbJidzAXitdJpaGyAuav8eoF1LOc0OMFkWDfkwATpmyle3gemqCLKaAnY9lbkB2FEx+1wbaFzqFhGRuAmEHyIi8pkO/hQRkY8QaMYiIqIyxP1KQ74yAf8XonH9qya7TzZZd5Q6hNGg5X3yH/PIr/HEdB6ycvoP5OL0tCgdi0VJ+aP5Wfr2hx/pO+zP0jcf+Q8E1n1OYHVkXCk/6P9yWSilnCi7kqLTXy8+nfWqtcRf7Q9zF/IN3mwyz9Gb+osAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMjNUMDI6MTA6NTItMDY6MDBQSHiKAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE1LTEyLTIzVDAyOjEwOjUyLTA2OjAwIRXANgAAAABJRU5ErkJggg==;

Answer 1

你的代码是对的，只是一个小错误：我从控制器返回一个base64字符串到视图。 base64是正确的我在网上查了一下（base64string to image ...）在我的javascript中，我称之为：

<script>
    var crosshairImgString = '{!! $crosshairPathString !!}';
</script>

将导致类似：

var crosshairImgString = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJ9QTFRF/////6Ki/1FR/3d3/wAA//v7/3Jy//7+/+/v/8XF/42N/1dX/x0d/+Dg/46O/zs7/w8P/wEB/+bm/4iI/yws/wMD//z8/7+//zw8/wQE/z09/6Cg/xsb/wIC/6am/xUV/xAQ/0ND/4mJ/1BQ/xcX/xkZ/3Fx/8PD//Pz/0BA/1JS/76+/4WF/2ho/8HB/3V1/09P/729/4SE/8TE/+fnIHiB0wAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAGbSURBVEjH3ZZbc4JADIVX+6GiogIC9YIXVLybtvr/f1sflKkIqN3pQ8e8bSZnkk3OnqxSuVYql8vlkvqNvQG8vQTEqABUjCfDqzWz3mgCNBt1s1Z9DLBa7Y7NxexOu2U9ADlu1yNlXtd17gD84L1Hxnr9wC+89GCYFBQChEmBw5FRhBifIybTaAYwc6eTs2c+yMX4F8QiXq6SuayW8QKA8SCvtmAIEK5N43qUhrkOAYZBTq/eAbyNdTt9a+MB9DN9q7o9INw4WcI4mxDoRbfzsboAayuPY9YaoGvdJGl5wMJMztvdbrfbJidzAXitdJpaGyAuav8eoF1LOc0OMFkWDfkwATpmyle3gemqCLKaAnY9lbkB2FEx+1wbaFzqFhGRuAmEHyIi8pkO/hQRkY8QaMYiIqIyxP1KQ74yAf8XonH9qya7TzZZd5Q6hNGg5X3yH/PIr/HEdB6ycvoP5OL0tCgdi0VJ+aP5Wfr2hx/pO+zP0jcf+Q8E1n1OYHVkXCk/6P9yWSilnCi7kqLTXy8+nfWqtcRf7Q9zF/IN3mwyz9Gb+osAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMTItMjNUMDI6MTA6NTItMDY6MDBQSHiKAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE1LTEyLTIzVDAyOjEwOjUyLTA2OjAwIRXANgAAAABJRU5ErkJggg==';


centerImageAtCanvas();
function centerImageAtCanvas() {
    var canvas = document.getElementById('imageView');
    var image = new Image();
    console.log(crosshairImgString);
    image.src = '{{ $crosshairPathString }}';
    image.onload = function () {
        var cxt = canvas.getContext('2d');
        cxt.drawImage(image,
             canvas.width / 2 - image.width / 2,
             canvas.height / 2 - image.height / 2
        );
    };
}

Laravel变量为img与javascript

1 个答案: