转载:https://blog.csdn.net/lengyuezuixue/article/details/79769103

在项目开发过程中遇到一个需求,通过C++调用js方法传参给前端显示图片,但前端如果想显示一个本地绝对路径的一张图片,必须把图片内容转换成base64,原因是浏览器中的JavaScript不能直接直接访问本地资源(例如文件系统,摄像头,麦克风等),除非事先得到了用户的允许,之所以进行该限制也是很有必要的,如果JavaScript能够肆无忌惮的访问本地的文件系统,那么窃取用户隐私数据就变得轻而易举了,当用户访问网络上的某个网页时,不知不觉中自己机器上保存的信用卡卡号,密码,公司的秘密文件等隐私文件或许已经被恶意的JavaScript程序上传到了远方的服务器上,这对用户来说是不可容忍的。

1.簡單的調用js函數的方式:

m_handler->GetBrowser()->GetMainFrame()->ExecuteJavaScript(strJSFuncName, m_handler->GetBrowser()->GetMainFrame()->GetURL(), );

具体调用可以参考我之前关于CEF博客

例如:

frame->ExecuteJavaScript(L"ModifyValue();",frame->GetURL(),);//无参数函数
frame->ExecuteJavaScript(L"ModifyValue('巴萨牛逼');",frame->GetURL(),);//有参数函数
如果参数是可变的,可以这样
CString strJsCode;
strJsCode.Format(L"setInstallStatus('%s','%s','%d');", lpData->strId.c_str(), strStatus, nPercent);
其中setInstallStatus是js函数,它有三个参数

但在具体调用过程中遇到,

感觉是字符串被截断了,没法当成一个js函数调用,然后调试图片转成base64生成的buffer,如下图发现字符串里面很多"\r\n"

应该是"\r\n"这个原因造成的,所以应该把字符串中的"\r\n"过滤掉。

wstring&   replace_all_WString(wstring&   str, const   wstring&   old_value, const   wstring&   new_value)
{
wstring::size_type pos();
while (true) { if ((pos = str.find(old_value, pos)) != wstring::npos)
{
str.replace(pos, old_value.length(), new_value);
pos += new_value.length();
}
else break;
}
return str;
} .... wstring wstrBase64=L"data:image/jpeg;base64,....."; wstrBase64 = replace_all_WString(wstrBase64, L"\r\n", L"");//过滤\r\n

CString strJson;
 strJson.Format(L"ModifyValue('%s');", wstrBase64.c_str());

frame->ExecuteJavaScript(wstrBase64,frame->GetURL(),0);//有参数函数

....

CEF C++调用前端js方法展示传递过来的图片数据的更多相关文章

  1. C#winform中使用Cef的ChromiumWebBrowser内嵌谷歌内核,调用前端js方法

    1.在winform中调用js方法: --调js中的方法无 入参形式 webBrowser1.ExecuteJavascript("logout()"); --调js中的方法给js ...

  2. C#后端调用前端的方法

    在我实际开发过程中,刚好遇到c#后端要调用前端js中的方法,所以研究了一下,特分享如下: 前端代码: <%@ Page Language="C#" AutoEventWire ...

  3. Gridview 行变色和行按钮调用前端js

    1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...

  4. .NET混合开发解决方案10 WebView2控件调用网页JS方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  5. (转)Silverlight调用的JS方法返回对象数组的处理方法

    最近在做Silverlight应用,需要用Silverlight调用页面中Javascript方法.这 个JS方法返回一个对象数组给Silverlight.对于这个对象数组怎么在Silverlight ...

  6. 子窗体与父窗体调用对方js方法

    有时候为了减少一个页面内的代码量,会将部分内容放到子窗体中,如后台管理中用iframe来进行管理 <div> <iframe id="dviframe" src= ...

  7. C#后台调用前台js方法

    前台js方法(写在head标签之内) <script type="text/javascript" language="javascript"> f ...

  8. 后台调用前台js方法

    后台调用前台jsClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<s ...

  9. js如何展示上传的图片

    前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...

随机推荐

  1. Windows 10 编译 OpenJDK11

    下载openjdk11源码 hg clone https://hg.openjdk.java.net/jdk-updates/jdk11u-dev/

  2. linux挂载系统ios文件与gcc安装

    挂载方法: 1.将iso文件拷贝到某一目录下,(/test) 2.建立挂载点文件夹:mkdir  /mnt/iso1 3.进入 mount –o loop  /test/**.iso  /mnt/is ...

  3. Django中web开发用md5加密图片名并存储静态文件夹

    一般在开发中,有的网站存在大量图片,首先图片的名称是不能重复的, 但是除了数据库可用的id以外我们可以用time模块中time.time()获取的时间来进行md5加密操作, 因为time模块所产生的时 ...

  4. k8s-No.1-概述与架构

    本章目录 k8s概述 k8s系统架构 k8s工作流程图 一  概述 k8s是什么 k8s是谷歌公司基于内部容器管理系统borg开源出的一个容器集群管理工具,它是用go语言开发,提供了容器的应用部署,规 ...

  5. Mysql5.8解压版安装问题:TCP/IP, --shared-memory, or --named-pipe should be configured on NT OS

    问题描述: cmd显示如下: .err文件显示: [ERROR] [MY-010131] [Server] TCP/IP, --shared-memory, or --named-pipe shoul ...

  6. [转]GO 开发rest api 接口

    注明出处:https://blog.csdn.net/haowenqi008/article/details/79150705 最近在研究Go,打算基于Go做点Web API,于是经过初步调研,打算用 ...

  7. iOS的签名机制

    1.从keychain里“从这证书颁发机构请求证书”,这样就在本地生成了一对公私钥,保存的CertificateSigningRequest就是公钥,私钥保存在本地电脑里. 2.苹果自己有一对固定的公 ...

  8. MySQL使用root权限创建用户并授权

    MySql篇 1.下载并安装Mysql (1)下载地址 MySQL-8.0下载地址 (2)Mysql配置 1.home目录下命令行执行:vi    .bash_profile来配置MySql绝对路径 ...

  9. 2018-2019-2 《网络对抗技术》Kali安装 Week1 20165236

    2018-2019-2 <网络对抗技术>Kali安装 Week1 20165236 一.kali 下载 安装 网络 共享 软件源 二.安装步骤 1.官网上下载kali Linux: 2.参 ...

  10. 2019-04-15 Python之利用matplotlib和numpy的简单绘图

    环境:win10家庭版, Anocada的 Spyder 一.简单使用 使用函数 plt.polt(x,y,label,color,width) 根据x,y 数组 绘制直,曲线 import nump ...