0

因此，在我的 laravel 站点中，我在控制器中有以下代码：

serveAngledImage($session,$imgId,$angle) {
      [...]

        $maskExists =\Storage::disk('s3')->exists($usrDirectory.$maskFile);

        $maskUrl = \Storage::disk('s3')->temporaryUrl(
            $usrDirectory . $maskFile, now()->addMinutes(12)
        );

        if ($maskExists) {

          $img = Image::make($maskUrl);
          $originalWidth = $img->width();
          $originalHeight = $img->height();
          $img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url');
        }
        else {
            $img = null;
        }

        return $img->encoded;

    }

由这条路线调用：

Route::get('/angleImage/{session_id}/{media_id}/{angle}', 'mediacenter@serveAngledImage');

所以，如果我使用浏览器访问这条路线，我会得到预期的结果，一个编码的图像，如果我修改代码以返回一个<img>带有源的标签，$img它可以完美地工作，但是当我将它添加到 css（通过 javascript）作为源时掩码，图像未加载，并且在 webDevelop 工具上，url 是红色的，并且警报“无法加载图像”。

var Mask = '-webkit-mask-image: url(/angleImage/'+this.sh_session+'/'+this.image.id+'/'+back.angle+'); -webkit-mask-repeat: no-repeat;position:absolute;top:0;left:0;display:block;';
                this.style = Mask;

但是，如果我将 css 中的链接复制粘贴到新的浏览器选项卡中，它确实会支持编码图像。Hww，如果我只是从粘贴的链接中打印出数据，它类似于：data:image/png;base64,iVBORw0KGgo....

4

2 回答 2

0

问题出在控制器部分，更具体地说是在干预图像代码中。我刚换了： 

$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url');

和

$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->response('png');

现在一切正常。

于 2018-06-07T21:15:54.363 回答
0

没有看到代码... CSS 上的背景图像 URL 上的路径是相对于文件路径的，如果您从子文件夹提供 CSS 文件，则必须更改 url 的路径。

如果加载了 CSS：

<link rel="stylesheet" href="/css/styles.css">

并提供图像：

http://example.com/images/photo.png

网址应该是：

background: url('../images/photo.png');
于 2018-06-07T14:59:16.027 回答