开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js手机保存网页图片不显示

当在手机上通过JavaScript保存网页图片但不显示时，可能涉及以下几个基础概念及解决方案：

基础概念

Base64编码：一种常见的将二进制数据转换为文本字符串的方法，常用于在网页中嵌入图片。
Blob对象：表示不可变的原始数据的类文件对象，可用于存储大量的二进制数据。
URL.createObjectURL()：创建一个指向参数中给出的对象的URL。
a标签的download属性：指示浏览器下载链接的资源，而不是导航到它。

可能的原因及解决方案

1. 图片路径问题

原因：图片的路径可能是相对路径或错误的绝对路径，导致无法正确加载。
解决方案：确保图片路径正确无误。

2. 跨域问题

原因：如果图片来源于不同的域，浏览器的安全策略可能会阻止加载。
解决方案：确保图片服务器允许跨域访问，或在服务器端设置CORS（跨源资源共享）。

3. 图片格式不被支持

原因：某些手机浏览器可能不支持特定的图片格式。
解决方案：尝试使用更通用的图片格式，如JPEG或PNG。

4. JavaScript代码问题

原因：保存图片的JavaScript代码可能存在逻辑错误。
解决方案：检查并修正JavaScript代码。

示例代码

以下是一个简单的示例，展示如何通过JavaScript在手机上保存网页上的图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Save Image</title>
</head>
<body>
    <img id="image" src="path_to_your_image.jpg" alt="Sample Image">
    <button onclick="saveImage()">Save Image</button>

    <script>
        function saveImage() {
            const img = document.getElementById('image');
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            canvas.toBlob((blob) => {
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'image.jpg';
                link.click();
            }, 'image/jpeg', 0.9);
        }
    </script>
</body>
</html>

注意事项

确保图片路径正确。
如果图片来自外部服务器，确保服务器设置了适当的CORS头部。
测试在不同的手机浏览器上是否都能正常工作。

通过以上步骤，通常可以解决手机上通过JavaScript保存网页图片不显示的问题。如果问题仍然存在，可能需要进一步检查网络请求或浏览器控制台的错误信息。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

小程序 — 保存图片到手机相册

GitHub：https://github.com/Ewall1106/miniProgramDemo 1、保存图片（1）要保存图片到手机相册中，所以首先我们来看看保存图片的api方法是什么？...wx.downloadFile(OBJECT)基本案例代码 3、实现保存图片到手机相册功能于是，把下载图片后成功返回的tempFilePath临时路径赋给wx.saveImageToPhotosAlbum...实现保存图片到手机相册功能代码 ? 保存成功 4、案例代码添加操作提示弹窗，全部的案例代码： saveImage() { wepy.showLoading({ title: '保存中.....duration: 2000 }); } }); } } }); } 5、问题及优化其实到上面部分就可以基本实现保存图片到手机相册的功能了...如果用户第一次点击了拒绝授权手机打开调试模式可以保存图片，但是关闭调试模式就不能保存图片了。下一章节解决这几个问题。

3.3K1 0

从网络下载图片，保存，并用 UIImageView 从保存中显示

//从网络下载图片 -(UIImage ) getImageFromURL:(NSString )fileURL { NSLog(@"执行图片下载函数"); UIImage * result...dataWithContentsOfURL:[NSURL URLWithString:fileURL]]; result = [UIImage imageWithData:data]; return result; } //将所下载的图片保存到本地...nExtension: (%@) is not recognized, use (PNG/JPG)", extension); NSLog(@"文件后缀不认识"); } } //读取本地保存的图片...，保存，并用 UIImageView 从保存中显示 NSString documentsDirectoryPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory..., NSUserDomainMask, YES) objectAtIndex:0]; NSLog(@"保存路径:%@",documentsDirectoryPath); //Get Image

6564 0

实现完整网页保存为图片的方法

业务场景中，会存在某些场景需要将网页内容快照保存下来的场景。...因为有些网页内容是联网异步获取的，所以爬虫保存html页面的方式无法保证后续数据与此前的一致性，因此将网页内容以图片保存下来，是一种简单而直接的思路。...命令，则会将js中指定的url页面内容生成图片并保存在指定的位置。...代码DEMO片段如下： /** * 将url内容转换为png图片保存 * @param url 目标url地址 * @param pngSavePath 图片保存位置 */ public static...在python中通过执行js语句，计算出网页真实的width和height值，然后对页面resize操作使其展示全部大小，之后再进行截图就可以保存整个网页了。

3K1 0

OpenCVSharp学习笔记（二）显示窗口和加载图片保存图片

显示窗口和加载图片创建和显示窗口，因为比较简单我就直接上代码了 //创建窗口 Cv2.NamedWindow("new", WindowFlags.Normal); //加载图片 Mat img =...Mat img = Cv2.ImRead(@"E:/1.jpeg"); 后面的参数为图片路径展示窗口 Cv2.ImShow("new", img); 第一个参数为窗口名称，后面为Mat类，也就是前面加载的图片类...该方法如果第一个参数指定的窗口名称不存在，则会自动进行创建后显示。...如果我们需要修改窗口的大小，可以使用 Cv2.ResizeWindow("new", 640,480); 第一个参数为窗口名称，后面为宽度和高度 Cv2.WaitKey(0);为设置窗口的等待时间，0为不限制时间，如果不添加该参数会发现窗口会闪退...Cv2.DestroyAllWindows();用于销毁窗口资源运行结果保存图片保存图片的方法很简单这里我就不多做说明了 Mat img = Cv2.ImRead(@"E:/1

3181 0

将网页中的canvas保存为图片

收到网友的请求，想把canvas保存为图片，其实很简单，canvas自带方法打开网页，如https://en.dpm.org.cn/dyx.html?...dest/files/image/8831/2009/2121/img0065.xml f12，找到canvas的dom，在console输入该dom的定位，$('#dyx canvas')，他就会显示该...的信息， [0]代码该dom的html代码调用toDataURL方法 $('#dyx canvas')[0].toDataURL("image/jpeg"); 即可得到base64的编码，剩下的保存就行了...注意：保存的只是页面显示到的，未显示的不会保存

2.5K2 0

js网页如何获取手机屏幕宽度

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth...(包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight...网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左

10.9K3 0

Node.js 爬取网页图片

利用 Node.js 爬取一个网页，通过第三方模块 cheerio.js 分析这个网页的内容，最后将这个网页的图片保存在本地。...整体思路通过第三方模块 request 请求网页地址，从而得到整个网页的DOM结构。...根据DOM结构利用 cheerio 模块分析出图片文件的地址，再次请求这个地址，最后将得到的图片数据储存在本地。项目目录 image.png img 文件夹用来存储图片文件。...node_modules 文件夹是模块默认的保存位置。 index.js 文件是整个项目的入口地址。 config.js 文件是配置文件。 analyze.js 文件用来存储分析 DOM 的方法。...config.js 文件配置网页地址及图片存放路径 // 网页地址 const url = 'https://unsplash.com/photos/RDDYS5DFo08'; // 图片文件夹路径

4.3K3 0

小程序 — 保存图片到手机相册②（用户授权等）

前言：上章基本实现保存图片到手机相册的功能了，但是还有这么几个问题没有解决，本章解决这几个问题。...GitHub：https://github.com/Ewall1106/miniProgramDemo 1、授权问题（1）如果用户第一次点击的时候，对弹出来的微信授权弹窗点击了拒绝，那么之后点击保存图片就没用了...图片来自小程序官网 ? 授权问题处理这样我们就解决了在保存图片的时候关于用户授权的问题。 2、手机打开调试模式可以保存图片，但是关闭调试模式就不能保存图片了。...这个问题很简单，因为在打开调试模式的时候，我们一般勾选了不校验合法域名，所以可以保存图片： ?...项目设置因为将图片保存到本地需要调用wx.downloadFile(OBJECT)这个api，所以解决的方法就是在微信公众平台中添加downloadFile合法域名就可以解决这个问题了

3K3 0

objective-c 从网络下载图片，保存，并用 UIImageView 从保存中显示

//从网络下载图片 -(UIImage *) getImageFromURL:(NSString *)fileURL { NSLog(@"执行图片下载函数"); UIImage * result...NSURL URLWithString:fileURL]]; result = [UIImage imageWithData:data]; return result; } //将所下载的图片保存到本地...nExtension: (%@) is not recognized, use (PNG/JPG)", extension); NSLog(@"文件后缀不认识"); } } //读取本地保存的图片...，保存，并用 UIImageView 从保存中显示 NSString * documentsDirectoryPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory..., NSUserDomainMask, YES) objectAtIndex:0]; NSLog(@"保存路径:%@",documentsDirectoryPath); //Get Image

1.3K2 0

JS自动跳转手机移动网页

JavaScript 中实现自动检测用户是否使用移动设备，并据此跳转到对应的手机移动网页，通常可以通过检查 navigator.userAgent 属性来识别用户代理字符串中包含的设备信息。...{ window.location.href = "http://m.example.com";}对于复杂的设备检测和更好的兼容性，可以考虑使用一些专门的库，比如过去提到的 Device.js...在JavaScript中，如果你想根据用户的设备（如手机或桌面设备）自动跳转到不同的网页，你可以使用window.location对象来改变当前页面的URL。...navigator.userAgent || navigator.vendor || window.opera; // 检查userAgent字符串中是否包含特定的手机标识...如果找到关键字，就认为用户正在使用移动设备，并自动跳转到移动版网页。否则，就认为用户正在使用桌面设备，并自动跳转到桌面版网页。

3211 0

JS实现保存当前网页HTML到本地(Chrom Firefox)

DOCTYPE html> 网页HTML存本地 js"></script> 保存文件 function fake_click

6.8K0 0

网页使用外链图片403无法显示问题

前言之前碰到一个问题，就是html中通过img标签引入一个图片地址，报403。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。...服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。...降级请求是指https协议的地址去请求http协议，所以上面403的情况还有另一种解决方法就是，请求的图片地址换成http协议，自己的地址使用http协议，这样降级请求也不会带上referrer。

1.3K4 0

使用Nodejs+puppeteer 批量保存网页为图片或PDF

学习Three.js的时候,看到官方提供了很多很多的example,实在太多了,但并不是每个我都感兴趣,想去了解,但我又记不住每个链接对对应的效果是什么样的,于是我想,能不能把所有的案例用图片保存下来,...用图片来对异性每一个example不是更直接明了吗?...于是我准备写一个工具,这个工具可以批量将网页保存成图片或PDF并且生成对应的图片案例页面,或json数据说干就干因为对nodejs比较数据,于是就选择用nodejs+puppeteer来实现这个小工具...x.innerText.replace(/\//g, '_',) } }) console.log(linkArr) 效果如图: 主程序代码如下使用async await 递归example的链接数组进行截图,保存

1.8K1 0

js下载网站中的canvas保存为图片

5584 0

【最新】解决Github网页上图片显示失败的问题

目录一、问题二、解决方法 2.1 找到URL 2.2 获取IP地址 2.3 修改hosts 三、最后说几句好几个星期之前本人就发现自己的 github在网页打开显示不了图片的问题了，...一、问题比如随便打开一个项目，图片都不能显示了，我头像也没了，真是一个令人伤心的事 F12打开控制台看一哈呦，一堆红色×。...2.1 找到URL 打开github任意未显示图片的网页，使用元素选择器（Ctrl+Shift+C）放在显示不了的图片上，或者在无法显示的图片上右键-检查元素，定位到该图片的标签，那么你得到了它的URL...OK了，至于无法保存，没有修改权限，鼠标右键-属性-安全-修改权限；或将hosts文件复制一份，修改之后，复制到原文件夹替换！...IP PS：另外要注意的一点就是，如果图片再次不能显示，只需要及时更新IP就行啦，这波操作不麻烦，你看我头像回来了！！！

4.1K2 0

【JavaScript小项目】在网页上显示选择的图片

选用实现图片预览。代码实现图片预览 js/test.js"> function upload(file) { console.log(file)... 效果展示本来是想部署通过网页上传一个图片到服务器的功能的...今天只实现了第一步，把图片选择和预览做了。服务器端还要部署接受服务才行。就这第一步都花费了两个小时，孰能生巧啊。只学不习永远都落实不了。 ---- 一番雾语：JavaScript上传图片并预览。

1.2K1 0

当网页图片不存在时不显示叉叉，显示默认图片的方法，管用的很！

有时候管理系统里面的产品图片没上传，或者因为网络原因传输过程中断了，图片没显示出来，就会显示一个叉叉，并且图片的占位符也不起作用了。...().Replace("original","middle")%>" alt="" class="img-responsive center-block"> js...","middle")%>" alt="" class="img-responsive center-block" onerror="nophoto()"> js

1.9K2 0

win10 uwp 截图获取屏幕显示界面保存图片水印

本文主要讲如何保存我们的屏幕显示的控件，保存为图片。这个也就是截图，截我们应用显示的，我们应用之外的不截图。...，不过这个图片我们需要用 BitmapEncoder 才可以保存为我们的图片 BitmapEncoder可以保存为bmp、jpg、gif、png，上面代码保存为 jpg ，但是一般保存为 png 比较好...我们把图片一部分不显示，截图下来看下不显示的是不是就不会在图片。...如果觉得我们水印要在中间，或下方或其他，那么我们需要把Image的宽度不设置，然后Grid也不设置高度和宽度。...p=1257 因为保存的图片比较大，我在找压缩图片的算法，找到了这个博客用C#开发一个WinForm版的批量图片压缩工具 - CSDN博客还有 GDI+ 如何将图片绘制成圆形的图片 - CSDN博客

1.3K1 0

使用OpenCV调用摄像头，显示图片，获取视频并保存

使用OpenCV调用摄像头，显示图片，获取视频并保存一、图片显示图片 import cv2 #导入OpenCV包 img = cv2.imread('1.jpg', cv2.IMREAD_COLOR...''' cv2.imshow("image", img)#显示图像。窗口会自动调整为图像大小。第一个参数是窗口的名字，其次才是我们的图像。...'frame',gray) if cv2.waitKey(1)==ord('q'): break cap.release() cv2.destroyAllWindows() 保存视频到文件...VideoWriter_fourcc(*'XVID')#使用XVID编码器 out = cv2.VideoWriter('output.avi',fourcc, 20.0, (640,480))#出分别是：保存文件名...、编码器、帧率、视频宽高 while(cap.isOpened()): ret, frame = cap.read() if ret==True: # 保存录像结果

4.1K3 0

为什么html在浏览器中不能显示图片_做html网页图片显示不出来

我遇到的问题是写了一个HTML程序，结果在网页上面不能显示，原因是图片路径放置错了。修改前代码：　效果图： ie网页上右键点击...“属性”’查看图片路径发现地址错误，我存放图片的地址在C:\Users\Administrator\Desktop\Python源码，所以将路径改为绝对路径(有的时候查看一些网页没能加载出来图片就是因为作者写的是绝对路径...，然后我们不能访问作者的路径，如果是相对路径就可以显示了)： <!

5.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭