首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >css/javascript中php生成的图像“无法加载图像”

css/javascript中php生成的图像“无法加载图像”
EN

Stack Overflow用户
提问于 2018-06-07 21:56:12
回答 2查看 38关注 0票数 0

所以在我的laravel站点中,我在一个控制器中有这样的代码:

代码语言:javascript
复制
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;

    } 

由该路由调用的:

代码语言:javascript
复制
Route::get('/angleImage/{session_id}/{media_id}/{angle}', 'mediacenter@serveAngledImage');

所以,如果我使用浏览器访问这条路线,我得到了预期的结果,一个编码的图像,如果我修改代码返回一个带有源$img<img>标记,它工作得很好,但是当我把它作为掩码的源添加到css (通过javascript)时,图像没有被加载,并且在webDevelop工具上,url是红色的,并且有一个警告“不可能加载图像”。

代码语言:javascript
复制
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...

EN

回答 2

Stack Overflow用户

发布于 2018-06-07 22:59:16

看不到代码..。CSS上的背景图像url上的路径与文件的路径相关,如果您从子文件夹中提供CSS文件,则必须更改url的路径。

如果加载了CSS:

代码语言:javascript
复制
<link rel="stylesheet" href="/css/styles.css">

然后提供镜像:

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

url应为:

代码语言:javascript
复制
background: url('../images/photo.png');
票数 0
EN

Stack Overflow用户

发布于 2018-06-08 05:15:54

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

代码语言:javascript
复制
$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url'); 

使用

代码语言:javascript
复制
$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->response('png'); 

现在一切都正常了。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50743099

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档